body {
    margin: 0;
    min-height: 100vh;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.7;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    backdrop-filter: blur(10px);
}

.header-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(.3rem, 1vw, .8rem) clamp(.5rem, 2vw, 1rem);
    gap: clamp(.3rem, 1vw, 1rem);
    font-size: clamp(.7rem, 1vw, .9rem);
    flex-wrap: nowrap;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

a {
    text-decoration: none; /* Quita el subrayado */
    color: inherit;         /* Conserva el color del texto del contenedor */
}

h2 {
    font-family: 'Playfair Display', serif;
    /*font-size: clamp(10px, 2.5vw, 18px);*/
    font-size: clamp(14px, 1.1vw, 16px);
    text-align: center;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: black;
    font-weight: 600;  /* seminegrita */
    text-transform: uppercase;
    margin: 0;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.4),
        0 2px 10px rgba(0,0,0,0.15);
    position: relative;
}

.subtituloYlogo h3 {
    margin: 0;
    padding: clamp(0.5rem, 1.5vw, 0.9rem) clamp(0.8rem, 3vw, 2rem);
    font-size: clamp(0.7rem, 1.4vw, 1.05rem);
    font-weight: 450;
    letter-spacing: clamp(0.18rem, 0.6vw, 0.35rem);
    color: #183552;
    text-align: center;
    text-transform: uppercase;
    font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    opacity: 0.95;
}

header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
}

.contenedorEnlaces{
    display:flex;
    flex-shrink: 0;
    justify-content:flex-end;
    align-items:center;
    gap: clamp(.3rem, 1.5vw, 2rem);
    white-space:nowrap;
}

.enlacePrincipal{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.6px;
    cursor: pointer;
    background: linear-gradient(135deg, #00C6FF, #0072FF);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: clamp(8px, 1.5vw, 14px);
    font-size: clamp(.7rem, 1vw, .8rem);
    padding: clamp(2px, .5vw, 4px) clamp(10px, 1.5vw, 14px);
    min-height: clamp(30px, 5vw, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: all 0.25s ease;
}

.enlacePrincipal:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #1E40AF, #1D4ED8);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.enlacePrincipalCancelar {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.6px;
    cursor: pointer;
    background: linear-gradient(135deg, #FF4D4D, #C1121F);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    font-size: clamp(11px, 1.1vw, 13px);
    padding: clamp(0px, 1vw, 2px) clamp(12px, 2vw, 14px);
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 16px rgba(120, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: all 0.25s ease;
}

.enlacePrincipalCancelar:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #DC2626, #991B1B);
    box-shadow:
        0 12px 30px rgba(120, 0, 0, 0.45),
        0 6px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.enlacePrincipal111 {
    color: black;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    font-size: clamp(9px, 1.2vw, 11px);
    padding: clamp(6px, 1.2vw, 8px) clamp(10px, 2vw, 14px);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    transition: all 0.35s ease;
}

.enlacePrincipal111:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
} 

.select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: clamp(6px, 1vw, 10px) clamp(8px, 1.5vw, 12px);
    font-size: clamp(12px, 2vw, 14px);
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    /* apariencia moderna */
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    /* sombra suave */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    /* transición suave */
    transition: all 0.2s ease;
}

.select:hover {
    border-color: #888;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Focus (cuando lo seleccionas) */
.select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
}

.contenedorTresElementos{
    display: flex;
    flex-direction: row; /* los pone en fila */
    min-height: 100vh; /* ocupa toda la pantalla */
}

.contenedorCentro1 {
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: 10px;
    gap: clamp(10px, 2vw, 20px);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.contenedorCentro {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    gap: clamp(10px, 2vw, 20px);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.contenedorBotones {
    display: flex;
    justify-content: center;
    align-items: center;
}

.botones {
    font-family: 'Montserrat', sans-serif;
    color: bisque;
    background: linear-gradient(45deg,#2fa089,#1B5E20);
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: bold;
    letter-spacing: 2px;
    border: none;
    transition: 0.3s;
}

.botones:hover {
    transform: scale(1.03);
}

.contenedorInput {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(90%, 450px);
    margin: 20px auto;
    box-sizing: border-box;
}

.campoo {
    display: flex;
    flex-direction: column; /*este lo agregue como prueba*/
}

.campo {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 10px);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
}

.campo label {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: black;
    text-align: left;
}

/* Inputs alineados y del mismo tamaño */
.campo input {
    /* flex: 1;        ocupan todo el espacio restante */
    flex: 1 1 0;
    /*min-width: clamp(40%, 15vw, 220px);*/
    min-width:0;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.campoDos {
    position: relative;
    display: grid;
}

.campoDosApto {
    display: grid;
    gap: 16px;
    border-radius: clamp(8px, 1.5vw, 12px);
    padding: clamp(14px, 3vw, 18px);
    background: #fff;
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
    /* Fuente elegante sin importar Google Fonts */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

p {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.6;
    text-align: left;
    margin: 0 0 clamp(0.75rem, 2vw, 1rem);
}

@media (min-width: 768px) {
    p {
        text-align: justify;
    }
}

.label-desc {
    margin-right: 6px;
    color: #2a2a2a;
}

.descripcion {
    margin: 0;
    color: #5a5a5a;
    line-height: 1.6;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: clamp(0.3px, 0.1vw, 0.8px);
    padding: 0 clamp(10px, 1.2vw, 16px);
    max-width: 100%;
}

.label-desc {
    font-weight: 600;
    margin-right: 4px;
    color: #5a5a5a;
}

.texto-desc {
    margin-right: clamp(0px, 0.5vw, 6px);
    overflow-wrap: anywhere;
    word-break: break-word;
    /*font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.2rem);*/
    font-size: clamp(0.95rem, 0.8vw + 0.5rem, 1.05rem);
    line-height: 1.6;
    max-width: 100%;
    text-align: justify;
    text-justify: inter-word; /* Mejora la justificación en navegadores compatibles */
}

.descripcion .texto-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #5a5a5a;
}

.descripcion.expandido .texto-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.contenedorParrafos{
    display: flex;
    justify-content: center;
}

.verMasDesc {
    display: inline-flex;
    align-items: center;
    margin-left: clamp(4px, 0.4vw, 7px);
    margin-top: 4px;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    transition:
        color .25s ease,
        background-color .25s ease,
        transform .2s ease;
}

.verMasDesc:hover {
    color: #1d4ed8;
    background-color: rgba(37, 99, 235, 0.08);
    text-decoration: none;
    transform: translateY(-1px);
}

.verMasDesc:active {
    transform: translateY(0);
}

.verMasDesc:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.formularios { 
    margin: 60px auto;
    font-size: clamp(13px, 1vw, 15px);
    padding: 20px;
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    font-family: 'Poppins', Arial, sans-serif;
    width: clamp(280px, 90%, 400px);
}

textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #2f2f2f;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    resize: vertical;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.25s ease;
}

textarea:focus {
    outline: none;
    border-color: #2fa089;
    box-shadow:
        0 0 0 3px rgba(47,160,137,0.15),
        0 6px 14px rgba(0,0,0,0.08);
}

textarea:hover {
    border-color: #bdbdbd;
}

label {
    display: flex;
    align-items: center;
    min-height: 2.5rem; /* más escalable que 40px */
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2937;
}

@media (max-width: 600px) {
    label {
        font-size: 0.8rem;
    }
}

.zonaSoltarImagenes {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #cfd8dc;
    border-radius: 12px;
    background: bisque;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}

.zonaSoltarImagenes:hover {
    border-color: #909fae;
    background: linear-gradient(45deg,#2fa089,#1B5E20);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.zonaSoltarImagenes .content {
    pointer-events: none; /* permite que el click sea en el label */
}

.zonaSoltarImagenes .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.zonaSoltarImagenes p {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.zonaSoltarImagenes.dragover {
    border-color: #28a745;
    background: #e8f5e9;
}

#imageInput {
    display: none; /* ocultamos el input */
} 

.contenedorCarousel{
    display: flex;
    justify-content: center;     /* centra horizontalmente */
    align-items: center;         /* centra verticalmente */
}

.carousel {
    position: relative;
    max-width: 500px;
    overflow: hidden; /* 🔥 evita que la imagen se salga del contenedor */
    border-radius: 12px;
    align-items: center;
    min-width: 500px; /* 🔥 evita que cambie */
}

.carousel img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; /* 🔥 clave */
    object-fit:contain;
    border-radius: 12px;
    background: #f0f0f0;
    object-position: center; 
}

.prev, .next {
    position: absolute;
    top: 50%;
}

.prev { 
    left: 1px;
    position: absolute;
    top: 50%; 
}

.next {
    right: 1px;
    position: absolute;
    top: 50%;
}

.counter {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 999;
}

#acciones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#acciones button {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#acciones button:first-child {
    background: #ffc107;
}

#acciones button:last-child {
    background: #dc3545;
    color: white;
}

#mainImage {
    touch-action: pan-y;
}

.publicacion {
    background: #fff;
    border: 2px solid #3B82F6;
    border-radius: 18px;
    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.08),
        0 2px 8px rgba(37, 99, 235, 0.05);
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) 3fr;
    align-items: stretch;
    width:100%;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.publicacion:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.14),
        0 5px 15px rgba(37, 99, 235, 0.12);
}

/* este es obligatorio no es reemplazable por clamp*/
@media (max-width: 768px){
    .publicacion{
        grid-template-columns: 1fr;
    }
}

/* etiqueta de premium o destacada------------- */

.badge-premium {
    position: absolute;
    top: clamp(6px, 1vw, 12px);   /* 👈 separación responsive */
    left: clamp(6px, 1vw, 10px); /* opcional mejorar también el lado */
    /*background: linear-gradient(135deg, #ff9800, #ff6f00); naraja */
    /*background: linear-gradient(135deg, #00c853, #009624); verde */
    background: linear-gradient(135deg, #d4af37, #a67c00);
    color: white;
    padding: clamp(1px, 0.4vw, 4px) clamp(4px, 1vw, 8px);
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 700;
    border-radius: 6px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
    line-height: 1.2;
    transition: transform 0.2s ease;
    min-width: 45px;
    text-align: center;
}

.badge-oportunidad {
    position: absolute;
    top: clamp(6px, 1vw, 12px);
    left: clamp(6px, 1vw, 10px);
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(255,255,255,.5);
    padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
    font-size: clamp(12px, 1vw, 16px);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 2px 8px rgba(0,0,0,.2);
    z-index: 10;
    white-space: nowrap;
    line-height: 1.2;
    min-width: 45px;
    text-align: center;
    transition: transform .2s ease;
}

.badge-vip {
    position: absolute;
    top: clamp(6px, 1vw, 12px);
    left: clamp(6px, 1vw, 10px);
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: #ffffff;
    padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 800;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 3px 10px rgba(30,60,114,.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    z-index: 10;
    white-space: nowrap;
    line-height: 1.2;
    min-width: 45px;
    text-align: center;
    transition: transform .2s ease;
}

.badge-vip:hover {
    transform: scale(1.05);
}

/* ==========================
   PLAN PLATINO
   ========================== */

.badge-platino {
    position: absolute;
    top: clamp(6px, 1vw, 12px);
    left: clamp(6px, 1vw, 10px);
    background: linear-gradient(
        135deg,
        #f8f9fa,
        #bfc3c7,
        #ffffff
        );
    color: #333;
    padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 800;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.9);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 3px 10px rgba(0,0,0,.25);
    text-shadow:
        0 1px 0 rgba(255,255,255,.8);
    z-index: 10;
    white-space: nowrap;
    line-height: 1.2;
    min-width: 45px;
    text-align: center;
    transition: transform .2s ease;
}

.badge-platino:hover {
    transform: scale(1.05);
}

/* fin etiqueta de premium o destacada------------- */

.publicacion .imagenes img {
    margin: 5px 0;
    width: 100%;
    height: auto;
}

.carousell {
    aspect-ratio: 4 / 3;
    width: 100%;
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
}

.carousell-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slidee {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 👈 esto centra la imagen */
    /*object-fit: cover;*/
    opacity: 0;
    /*transition: opacity 0.8s ease-in-out;*/
}

.slidee.active {
    /*display: block;*/
    opacity: 1;
}

.prevv, .nextt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: clamp(24px, 3vw, 34px);
    height: clamp(24px, 3vw, 34px);
    font-size: clamp(6px, 1.2vw, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: clamp(7px, 1.5vw, 10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
}

.prevv:hover, .nextt:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.prevv {
    left: 12px;
}

.nextt {
    right: 12px;
}

.thumb {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.thumb.active {
    transform: translateY(-6px) scale(1.05);
    opacity: 1;
    border: 2px solid #007bff;
}

.dots {
    text-align: center;
    margin-top: 8px;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 4px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: #333;
    transform: scale(1.2);
}

.contenedorFiltros { 
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 👈 2 columnas */
    gap: 20px;
    width: 100%;
}

.separador {
    width: 90%;
    height: 2px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 0 auto; /* centra la línea horizontalmente */
}

.parrafoH3 {
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2f2f2f;
    margin: 20px 0;
    position: relative;   
}

.averiguar{

    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 100;
    width: min(92%, 1050px);
    position:relative;
    z-index:100;
    padding: clamp(10px, 1.5vw, 18px);
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,.06);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    box-shadow:
        0 10px 30px rgba(15,23,42,.08),
        0 2px 8px rgba(15,23,42,.04);
    overflow: visible;
}

.contenedorDosBuscadores{
    display: flex;
    justify-content: row;
}

.forms{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin:0 auto;
}

.grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(220px,100%), 1fr));
    gap:10px;
    width:100%;
}

.campoDoss{
    position:relative;
    width:100%;
    min-width:0;
    overflow:visible;
    z-index:20;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:clamp(2px,.5vw,6px);
    box-sizing:border-box;
}

.campoDoss input,
.campoDoss select{
    width:100%;
    max-width:300px;
    padding:8px 12px;
}

.autocomplete-lista {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: clamp(6px, 1vw, 10px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    max-height: clamp(140px, 35vh, 260px);
    overflow-y: auto;
    z-index: 9999;
}
/*Items más compactos con clamp*/
.item-autocomplete {
    padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 14px);
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
    transition: background .2s;
}

/*Texto responsive*/
.item-autocomplete strong {
    display: block;
    color: #1f2937;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.2;
}

.item-autocomplete small {
    display: block;
    color: #6b7280;
    font-size: clamp(12px, 1.8vw, 14px);
    margin-top: 2px;
    line-height: 1.2;
}

.item-autocomplete:hover {
    background: #f3f7ff;
}

.sin-resultados {
    text-align: center;
    padding: 40px;
    font-size: 20px;
    color: #555;
    background: #f5f5f5;
    border-radius: 10px;
    margin: 20px;
}

/* =========================================
   CÓDIGO DE PUBLICACIÓN
========================================= */

.idPagUsuario {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    box-sizing: border-box;
    font-size: clamp(12px, 0.75vw, 14px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: clamp(0.1px, 0.03vw, 0.4px);
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   PRECIO PRINCIPAL
========================================= */

.precio {
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    font-size: clamp(18px, 1.7vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: clamp(0.1px, 0.03vw, 0.5px);
    color: #0f2f6f;
    background: linear-gradient(
        135deg,
        #f8fbff,
        #e8f1ff
        );

    border-radius: clamp(6px, 0.6vw, 10px);
    box-shadow:
        0 3px 8px rgba(15, 47, 111, 0.08);
    overflow-wrap: anywhere;
}

.infVenta {
    border-radius: 0 0 0 0;
    background: linear-gradient(135deg,
        #1e3a5f,
        #274c77,
        #3b6ea8,
        #5b8fc9
        );
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: 0.4px;
    font-weight: 500;
    margin: 0;
    display: inline-block;
    box-shadow:
        0 10px 25px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.infContacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 400;
    line-height: 1.6;
    color: #3a3a3a;
    justify-content: space-evenly;
    overflow-wrap: break-word;
}

.contenedorInfItems {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 20vw, 140px), 1fr));
    gap: clamp(6px, 1vw, 10px);
    padding: clamp(6px, 1.5vw, 10px);
    width: 100%;
    box-sizing: border-box;
}

.infItems {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
    font-size: clamp(0.85rem, 1vw + 0.2rem, 0.95rem);
    font-weight: 400;
    color: #5a5a5a;
    min-width: 0;
    overflow-wrap: anywhere;
}

.infItems span {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: clamp(0.83rem, 1.15vw, 0.93rem);
}

.infItems span:last-child {
    white-space: nowrap;
}

.contenedorInformativo {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 👈 IMPORTANTE */
    gap: 8px;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.toggleDesc{
    color: black;
    cursor: pointer;
    font-weight: 600;
    margin-left: 6px;
    text-decoration: none;
}

/* ---Fin esto es para la opcion de mostrar u ocultar descripcion */

.paginacion {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.paginacion button {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 6px;
}

.paginacion button.active {
    background: black;
    color: white;
    font-weight: bold;
}

.paginacion button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* estilos para la editacion de publicacion*/
.contenedorPublicaciones{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
}

CARD
.cardPublicacion{
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.cardPublicacion:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/*IMAGEN*/
.imagenPublicacion{
    width:100%;
    height:250px;
    object-fit:cover;
}

.infoPublicacion{
    padding:15px;
}

.editor {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.hidden {
    display: none;
}

.editor-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: min(90%, 700px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.galeriaEdicion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.thumb-edit {
    position: relative;
}

.thumb-edit img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f0f0f0;
    padding: 4px;
}

.thumb-edit .btn-eliminar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ff4d4d, #7a0000);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 10px rgba(0,0,0,0.35);
    transition: 0.2s ease;
}

.btn-eliminar:hover{
    transform: scale(1.08);
}

.btn-eliminar svg{
    pointer-events: none;
}

.thumb-edit .btn-portada {
    position: absolute;
    top: 10px;
    right: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(145deg, #3b82f6, #1e3a8a);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 300;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

/* 👇 importante: mismo selector */
.thumb-edit .btn-portada:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.cardPublicacion {
    padding: 15px;
    border-radius: 12px;
    background: white;
    margin: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.pcartaspublicacion{
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 500;
    color: #2C2C2C;
    line-height: 1.5;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* máximo 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;   /* 👈 clave */
    overflow-y: auto;   /* 👈 scroll interno */
    padding: 20px;
    border-radius: 12px;
}

.btnUpload {
    display: inline-block;
    background: rgba(176, 141, 42, 0.12);
    color: #8a6b1f;
    border: 1px solid #d6b25e;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btnUpload:hover {
    background: #8a6b1f;
    color: white;
}

#inputImagenes {
    display: none;
}

/* Título */
.campoDosApto h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Tarjeta de pago */
.pago-nequi {
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 15px;
    background: #f9f9f9;
}

/* Título dentro de pago */
.pago-nequi h4 {
    margin: 0 0 8px 0;
    font-weight: 600;
}

/* Caja de dato */
.pago-nequi .dato {
    margin: 10px 0;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Texto secundario */
.texto-secundario {
    font-size: 13px;
    color: #666;
}

/* Nota importante */
.nota {
    font-size: 13px;
    color: #444;
}

.pago-nequi .dato {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.whatsapp-msg {
    width: 100%;
    box-sizing: border-box;

    padding: clamp(12px, 2vw, 18px);

    border: 1px solid #dbe7f3;
    border-left: 4px solid #2563EB;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #f8fbff 0%,
        #f3f8ff 100%
        );

    color: #374151;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.78rem, 0.75rem + 0.2vw, 0.9rem);
    line-height: 1.55;

    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vw, 12px);

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.whatsapp-msg strong {
    display: block;
    width: 100%;
    box-sizing: border-box;

    color: #1d4ed8;
    font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
    font-weight: 700;
    line-height: 1.35;

    padding: 0;
    margin: 0;
}

.whatsapp-msg ol {
    margin: 0;
    padding-left: 22px;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.whatsapp-msg li {
    padding-left: 3px;
}


.oculto-plan {
    display: none;
}

.subtituloYlogo{
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra horizontalmente */
    align-items: center;     /* centra verticalmente */
    height: auto;
}

/* Contenedor del enlace */
.contenedorRecuperar {
    text-align: center;
    margin-top: clamp(10px, 2vw, 20px);
    margin-bottom: clamp(10px, 2vw, 20px);
}

/* Estilo del enlace */
.enlaceRecuperar {
    display: inline-block;
    width: min(100%, 280px);
    padding: clamp(8px, 1.5vw, 10px) clamp(10px, 2vw, 16px);
    border-radius: clamp(5px, 1vw, 8px);
    background-color: #f5f7fa;
    color: #0066cc;
    text-decoration: none;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.enlaceRecuperar:hover {
    background-color: #e8eef7;
    color: #004999;
}

.modal-mapa{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:9999;
    justify-content:center;
    align-items:center;
}

.modal-mapa.mostrar{
    display:flex;
}

.modal-mapa-contenido{
    position:relative;
    width:90%;
    max-width:900px;
    background:white;
    border-radius:10px;
    overflow:hidden;
}

.cerrar-mapa{
    position:absolute;
    top:10px;
    right:10px;
    z-index:10;
    border:none;
    background:#fff;
    font-size:20px;
    cursor:pointer;
    width:40px;
    height:40px;
    border-radius:50%;
}

.sin-mapa {
    margin: 0;
    color: #888;
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.4;
}

.enlaceMapa {
    width: clamp(38px, 4vw, 42px);
    height: clamp(38px, 4vw, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: white;
    color: #222;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: all 0.2s ease;
    position: absolute;
    right: clamp(8px, 1.5vw, 24px);
    top: clamp(30px, 3vw, 55px);
    z-index: 10;
}

.enlaceMapa svg {
    width: clamp(18px, 2vw, 20px);
    height: clamp(18px, 2vw, 20px);
}

/* Hover solamente en dispositivos con mouse */
@media (hover: hover) {
    .enlaceMapa:hover {
        transform: scale(1.08);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }
}

.enlaceMapa:active {
    transform: scale(0.95);
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 3vw, 30px);
    background: linear-gradient(135deg, #1D4ED8, #3B82F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

footer {
    text-align: center;
    padding: clamp(14px, 2vw, 24px);
    font-size: clamp(12px, 1.2vw, 14px);
    color: #666;
    border-top: 1px solid #eee;
    width: 100%;
    box-sizing: border-box;
}

precioGrande {
    font-family: 'Playfair Display', serif;
    font-size: clamp(14px, 3vw, 20px);
    text-align: center;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: black;
    text-transform: uppercase;
    margin: 10px 0;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.4),
        0 2px 10px rgba(0,0,0,0.15);
    position: relative;
}

.marcaMasLogo {
    display: flex;
    flex-direction: row ;
    justify-content: center;
    align-items: center;
}

.logo-link {
    background: black;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(8px, 2.8vw, 20px);
    flex: 1;
    min-width: 0;
}

.logo-link,
.contenedorEnlaces {
    flex-shrink: 1;
}

/* botones en las miniaturas de publicar */
.thumbnails{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #2e7d32 rgba(0,0,0,0.1);
}

/* 🔥 Chrome, Edge, Safari */
.thumbnails::-webkit-scrollbar{
    height: 8px;
}

.thumbnails::-webkit-scrollbar-track{
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

.thumbnails::-webkit-scrollbar-thumb{
    background: linear-gradient(90deg, #4caf50, #1b5e20);
    border-radius: 10px;
}

.thumbnails::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(90deg, #66bb6a, #2e7d32);
}

.thumbnails img {
    width: 400px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}

/* Imagen seleccionada actualmente */
.thumbnails img.active {
    border: 2px solid #007bff;
    opacity: 1;
}

/* Si es portada Y está seleccionada */
.thumbnails img.active.portada-thumb {
    border: 2px solid #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 1);
}

.thumb-wrapper{
    position: relative;
    width: 220px;
    flex-shrink: 0;
    flex: 0 0 auto;
}

.thumb-wrapper img{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: .2s;
}

/*⭐ PORTADA */
.thumb-wrapper img.portada{
    opacity: 1;
    border: 3px solid gold;
    box-shadow: 0 0 10px rgba(255,193,7,.9);
}

.btn-thumb-portada{
    position:absolute;
    top:4px;
    left:4px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border:none;
    border-radius:20px;
    background:rgba(0,0,0,.75);
    color:white;
    font-size:11px;
    cursor:pointer;
    z-index:10;

    /* 🎨 verde metalizado */
    background: linear-gradient(145deg, #3cff8f, #0a6b3a);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),  /* brillo superior */
        inset 0 -2px 4px rgba(0,0,0,0.45),       /* profundidad inferior */
        0 2px 6px rgba(0,0,0,0.5);               /* sombra exterior */
}

.btn-thumb-portada span{
    white-space:nowrap;
}

.btn-thumb-delete{
    position:absolute;
    width:24px;
    height:24px;
    border:none;
    background:rgba(0,0,0,.6);
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px;

    /* 🎨 efecto metal rojo */
    background: linear-gradient(145deg, #ff3b3b, #8b0000);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.5);
}

.btn-thumb-portada{
    top:4px;
    left:4px;
}

.btn-thumb-delete{
    top:4px;
    right:4px;
}

.btn-thumb-portada svg,
.btn-thumb-delete svg{
    width:16px;
    height:16px;
}

.icon-portada{
    filter:drop-shadow(0 0 2px #000);
}

.icon-delete{
    filter:drop-shadow(0 0 2px #000);
}

/* ✨ Contacto Premium */
.item-contacto,
.item-contacto1 {
    padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 14px);
    display: flex;
    align-items: center;
    border-radius: 12px;
    font-size: clamp(0.875rem, 1.05vw, 0.95rem);
    font-weight: 600;
    cursor: default;
    transition: all .28s ease;
}

/* ⚪ Tarjeta principal (Plateado Premium) */
.item-contacto {
    color: #374151;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f8f9fb 35%,
        #eef2f6 70%,
        #e2e8f0 100%
        );

    border: 1px solid #cfd8e3;
    box-shadow:
        0 5px 14px rgba(100, 116, 139, .08),
        inset 0 1px 0 rgba(255,255,255,.98);
}

/* 🔷 Tarjeta destacada (Celeste Premium) */
.item-contacto1 {
    color: #0f3d6e;
    background: linear-gradient(
        135deg,
        #f7fbff 0%,
        #e8f3ff 55%,
        #d7ebff 100%
        );

    border: 1px solid #b7d7ff;
    box-shadow:
        0 6px 18px rgba(37,99,235,.10),
        inset 0 1px 0 rgba(255,255,255,.98);
}

/* 🧩 Iconos */
.item-contacto span:first-child,
.item-contacto1 span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    transition: .28s ease;
}

/* ☎ Teléfono */
.icono-telefono {
    color: #64748b;
}

/* 💬 WhatsApp */
.icono-whatsapp {
    color: #16a34a;
}

/* 📧 Correo */
.icono-correo {
    color: #d97706;
}

/* 📍 Ubicación */
.icono-ubicacion {
    color: #64748b;
}

/* 🌐 Web */
.icono-web {
    color: #7c3aed;
}

/* Hover */
.item-contacto:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
    box-shadow:
        0 10px 24px rgba(100,116,139,.16),
        inset 0 1px 0 rgba(255,255,255,1);
}

.item-contacto1:hover {
    transform: translateY(-2px);
    border-color: #60a5fa;
    box-shadow:
        0 10px 24px rgba(37,99,235,.14),
        inset 0 1px 0 rgba(255,255,255,1);
}

.item-contacto:hover span:first-child,
.item-contacto1:hover span:first-child {
    transform: scale(1.12);
}

/* estilo al modal de foto ampliada*/
.modal-imagen{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:clamp(10px, 2vw, 40px);
}

.modal-imagen.mostrar{
    display:flex;
}

/* contenedor */
.modal-imagen-contenido{
    position:relative;
    width:min(92vw, 1600px);
    height:min(92vh, 1000px);
    display:flex;
    justify-content:center;
    align-items:center;
}

/* imagen */
#imagenGrande{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:12px;
    user-select:none;
    -webkit-user-drag:none;
}

/* contador */
.contador-modal{
    position:absolute;
    bottom:clamp(6px, 2vw, 14px);
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.6);
    color:#fff;
    padding:clamp(4px, 1.2vw, 8px) clamp(8px, 2vw, 14px);
    border-radius:20px;
    font-size:clamp(.8rem, 1.2vw, 1.2rem);
    z-index:10;
    backdrop-filter: blur(6px);
}

/* cerrar */
.cerrar-imagen{
    position:absolute;
    top:clamp(12px, 2vw, 30px);
    right:clamp(12px, 2vw, 30px);
    width:clamp(40px, 5vw, 70px);
    height:clamp(40px, 5vw, 70px);
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.35);
    color:white;
    font-size:clamp(24px, 3vw, 42px);
    border:none;
    border-radius:50%;
    cursor:pointer;
    z-index:11;
    transition:.25s ease;
}

.cerrar-imagen:hover{
    background:rgba(255,255,255,.2);
    transform:scale(1.1);
}

/* flechas */
.flecha{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:white;
    font-size:clamp(1.5rem, 3vw, 3rem);
    cursor:pointer;
    padding:1rem;
    z-index:11;
}

/* izquierda */
.flecha:first-of-type{
    left:clamp(2px, 2vw, 10px);
}

/* derecha */
.flecha:last-of-type{
    right:clamp(2px, 2vw, 10px);
}

.ocultarLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.selectMaximo{
    display: block;
    width: 100%;
    max-width: 500px;
    padding: clamp(5px, 0.8vw, 8px) clamp(8px, 1vw, 12px);
    background: #f2f4f7;
    color: #2563EB;
    border: 2px solid #7EC8FF;
    border-radius: clamp(8px, 1vw, 10px);
    font-size: clamp(0.8rem, 0.8rem + 0.3vw, 1rem);
    font-weight: 600;
    text-align: center;      /* Centra el texto */
    text-align-last: center; /* Centra la opción seleccionada */
    box-sizing: border-box;
    outline: none;
    transition: all 0.25s ease;
}

/* Efecto al seleccionar */
.selectMaximo:focus{
    border-color: #00BFFF;
    box-shadow: 0 0 8px rgba(0,191,255,.35);
}

/* Efecto al pasar el mouse */
.selectMaximo:hover{
    background: #eceff3;
    border-color: #5BBEFF;
}

/* Opciones del desplegable */
.selectMaximo option{
    background: #fff;
    color: #000;
    padding: 8px 12px; /* efecto visual de más ancho */
}

.selectMaximo::placeholder{
    color: #2563EB;
}

.botonBuscar{
    width: 100%;
    height: clamp(30px, 4vw, 34px);
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #00C6FF, #0072FF);
    color: #fff;
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,114,255,.25);
    transition: all .25s ease;
    display: flex;
    align-items: center;      /* centra verticalmente */
    justify-content: center;  /* centra horizontalmente */
}

.botonBuscar:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,114,255,.35);
    filter: brightness(1.05);
}

.botonBuscar:active{
    transform: scale(0.97);
    box-shadow: 0 4px 10px rgba(0,114,255,.2);
}

.nequi-header{
    display: flex;
    align-items: center;
    gap: 8px;
}

.nequi-header svg{
    width: clamp(32px, 6vw, 60px);
    height: clamp(32px, 6vw, 60px);
    flex-shrink: 0;
}

.nequi-header h4{
    margin: 0;
}

.contenedorEnlaces1{
    display: flex;  
    gap: 2vw;
    justify-content: center;
    margin: 20px;
}

.contenedorPublicacionesaprobador {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    overflow: hidden;
    box-sizing: border-box;
}

.cardPublicacionaprobador {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: clamp(0.6rem, 2vw, 1.2rem);
    padding: clamp(0.6rem, 2vw, 1rem);
    margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: clamp(0.5rem, 1.5vw, 0.75rem);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    box-sizing: border-box;
    overflow: hidden;
}

.cardPublicacionaprobador * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Botones adaptables */
.cardPublicacionaprobador button {
    flex: 1 1 clamp(5.5rem, 18vw, 9rem);
    min-width: clamp(5rem, 20vw, 7.5rem);
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.4rem, 1.5vw, 0.75rem)
        clamp(0.6rem, 2vw, 1rem);
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
}

.subtituloYlogo h4 {
    margin: 0;
    padding: clamp(0.25rem, 1vw, 0.6rem) clamp(0.5rem, 2vw, 1rem);
    font-size: clamp(0.65rem, 1.1vw, 0.95rem);
    font-weight: clamp(400, 0.8vw, 500);
    letter-spacing: clamp(0.1rem, 0.35vw, 0.25rem);
    color: #1f4268;
    text-align: center;
    text-transform: uppercase;
    font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    opacity: 0.95;
    transition: color .3s ease;
}

.subtituloYlogo h4 {
    margin: 0;
    padding: clamp(0.3rem, 1vw, 0.7rem);
    font-size: clamp(0.65rem, 1.25vw, 0.9rem);
    font-weight: 450;
    letter-spacing: clamp(0.15rem, 0.45vw, 0.3rem);
    color: #244b73;
    text-align: center;
    text-transform: uppercase;
    font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
}

/* =========================================================
   DASHBOARD DE MÉTRICAS
   ========================================================= */

.dashboard-metricas {

    width: min(94%, 1400px);
    margin:
        clamp(25px, 5vw, 60px)
        auto;
}

/* =========================================================
   TÍTULOS DEL DASHBOARD
   ========================================================= */

.dashboard-metricas > h2 {
    margin-bottom:
        clamp(20px, 3vw, 35px);
    font-size:
        clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}
/* =========================================================
   TARJETAS KPI
   ========================================================= */

.tarjetas-metricas {
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%, 220px),1fr));
    gap:clamp(15px, 2vw, 25px);
}

/* =========================================================
   TARJETA
   ========================================================= */

.tarjeta {
    position: relative;
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    border:1px solid rgba(0, 0, 0, 0.06);
    border-radius:clamp(12px, 2vw, 20px);
    padding:clamp(20px, 3vw, 30px);
    text-align: center;
    box-shadow:0 6px 20px rgba(0, 0, 0, 0.08);
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    overflow: hidden;
}
/* Línea decorativa superior */
.tarjeta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background:#1565c0;
}
/* Hover */
.tarjeta:hover {
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0, 0, 0, 0.13);
}
/* =========================================================
   TÍTULO DE TARJETA
   ========================================================= */
.tarjeta h3 {
    margin:0 0 clamp(10px, 2vw, 18px);
    font-size:clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight:600;
    color:#475569;
    line-height:1.4;
}

/* =========================================================
   VALOR KPI
   ========================================================= */
.tarjeta span {
    display:block;
    font-size:clamp(2rem, 5vw, 3.2rem);
    font-weight:800;
    line-height:1;
    color:#1565c0;
}

/* =========================================================
   PANELES
   ========================================================= */

.panel-metrica {
    width:100%;
    margin-top:clamp(20px, 4vw, 35px);
    padding:clamp(18px, 3vw, 30px);
    background:#ffffff;
    border:1px solid rgba(0, 0, 0, 0.06);
    border-radius:clamp(12px, 2vw, 20px);
    box-shadow:0 6px 20px rgba(0, 0, 0, 0.08);
    overflow-x:auto;
}
/* =========================================================
   TÍTULO DE PANEL
   ========================================================= */

.panel-metrica h3 {
    margin:0 0 clamp(15px, 2vw, 25px);
    font-size:clamp(1rem, 2vw, 1.4rem);
    font-weight:700;
    color:#1e293b;
}
/* =========================================================
   TABLAS
   ========================================================= */

table {
    width:100%;
    min-width:600px;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
}
/* =========================================================
   ENCABEZADOS
   ========================================================= */

th {
    background:#1565c0;
    color:#ffffff;
    padding:clamp(10px, 1.5vw, 15px);
    font-size:clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}
/* Primera esquina */
th:first-child {
    border-top-left-radius:8px;
}

/* Última esquina */
th:last-child {
    border-top-right-radius:8px;
}
/* =========================================================
   CELDAS
   ========================================================= */

td {
    padding:clamp(10px, 1.5vw, 14px);
    border-bottom:1px solid #e2e8f0;
    text-align:center;
    font-size:clamp(0.75rem, 1.5vw, 0.95rem);
    color:#334155;
}
/* =========================================================
   FILAS
   ========================================================= */
tbody tr {
    transition:background 0.2s ease;
}

tbody tr:hover {
    background:#f8fafc;
}
/* Última fila */
tbody tr:last-child td {
    border-bottom:none;
}
/* =========================================================
   LISTA DE DISPOSITIVOS
   ========================================================= */

#listaDispositivos {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%, 160px),1fr));
    gap:clamp(10px, 2vw, 18px);
    margin:0;
    padding:0;
    list-style:none;
}
/* =========================================================
   ELEMENTO DISPOSITIVO
   ========================================================= */
#listaDispositivos li {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        55px;
    padding:
        14px;
    background:
        #f8fafc;
    border:
        1px solid #e2e8f0;
    border-radius:
        12px;
    color:
        #334155;
    font-size:
        clamp(0.85rem, 1.5vw, 1rem);
    font-weight:
        600;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* ICONOS SVG REDES SOCIALES */

.instagram-footer,
.tiktok-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.instagram-footer a,
.tiktok-footer a {
    width: clamp(40px, 5vw, 52px);
    height: clamp(40px, 5vw, 52px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    box-sizing: border-box;

    text-decoration: none;
    border-radius: 50%;

    transition: transform 0.2s ease;
}

.instagram-footer svg,
.tiktok-footer svg {
    display: block;

    width: clamp(28px, 3.5vw, 36px);
    height: clamp(28px, 3.5vw, 36px);

    max-width: 100%;
    max-height: 100%;
}

@media (hover: hover) {
    .instagram-footer a:hover,
    .tiktok-footer a:hover {
        transform: scale(1.1);
    }
}

.instagram-footer a:active,
.tiktok-footer a:active {
    transform: scale(0.95);
}

.redes-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 18px);
    width: 100%;
    margin-top: clamp(14px, 2vw, 20px);
}













#listaDispositivos li:hover {

    transform:
        translateY(-3px);

    background:
        #ffffff;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .dashboard-metricas {

        width:
            94%;

    }

    .tarjetas-metricas {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   RESPONSIVE - MÓVILES
   ========================================================= */

@media (max-width: 600px) {

    .dashboard-metricas {

        width:
            92%;

        margin:
            25px auto 40px;

    }


    .dashboard-metricas > h2 {

        font-size:
            1.35rem;

        text-align:
            center;

    }


    .tarjetas-metricas {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .tarjeta {

        padding:
            22px 18px;

    }


    .tarjeta span {

        font-size:
            2.5rem;

    }


    .panel-metrica {

        padding:
            15px;

        border-radius:
            14px;

    }


    .panel-metrica h3 {

        font-size:
            1.05rem;

    }


    table {

        min-width:
            550px;

    }


    #listaDispositivos {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   CONTENEDOR GENERAL - MÉTRICAS DEL NEGOCIO
   ========================================================= */

.panel-negocio {

    width:
        100%;

}


/* =========================================================
   CONTENEDOR DE MÉTRICAS HIJAS
   ========================================================= */

.contenedorMetricasNegocio {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 280px),
                1fr
            )
        );

    gap:
        clamp(15px, 2vw, 25px);

    width:
        100%;

}


/* =========================================================
   CADA CONTENEDOR HIJO
   ========================================================= */

.metrica-negocio {

    width:
        100%;

    background:
        #f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius:
        clamp(10px, 1.5vw, 16px);

    padding:
        clamp(16px, 2.5vw, 25px);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   HOVER
   ========================================================= */

.metrica-negocio:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   TÍTULO
   ========================================================= */

.metrica-negocio h4 {

    margin:
        0 0 clamp(12px, 2vw, 18px);

    font-size:
        clamp(0.95rem, 1.8vw, 1.2rem);

    font-weight:
        700;

    color:
        #1e293b;

}


/* =========================================================
   LISTAS
   ========================================================= */

.metrica-negocio ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* =========================================================
   ELEMENTOS DE LAS LISTAS
   ========================================================= */

.metrica-negocio li {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 15px;

    background:
        #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius:
        10px;

    color:
        #334155;

    font-size:
        clamp(0.85rem, 1.5vw, 1rem);

    font-weight:
        600;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contenedorMetricasNegocio {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .contenedorMetricasNegocio {

        grid-template-columns:
            1fr;

    }

    .metrica-negocio {

        padding:
            15px;

    }

}


/* =========================================================
CONFIGURACIÓN GENERAL
========================================================= */



html {
scroll-behavior: smooth;
}



/* =========================================================
ENCABEZADO
========================================================= */

.encabezadoPrincipal {
width: 100%;
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 100;
}

.contenedorEncabezado {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: clamp(14px, 2vw, 18px) clamp(15px, 3vw, 25px);
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    font-size: clamp(4px, 2.8vw, 20px);
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
}


.logo-link h1 {
    font-family: "Inter", sans-serif;
   
    font-size: clamp(0.8rem, 3.5vw, 2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    margin: 0;

    background: linear-gradient(
        135deg,
        #0057D9 0%,
        #0F6FFF 35%,
        #3B82F6 70%,
        #60A5FA 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: all .3s ease;
}

.logo-link h1,
.enlacePrincipal {
    white-space: nowrap;
}


/* =========================================================
CONTENEDOR PRINCIPAL
========================================================= */

.contenedorPolitica {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: clamp(25px, 5vw, 70px) clamp(10px, 3vw, 20px);
}

/* =========================================================
DOCUMENTO DE POLÍTICA
========================================================= */

.contenidoPolitica {
width: 100%;
background-color: #ffffff;
padding: clamp(25px, 5vw, 60px);
border-radius: 16px;
border: 1px solid #e5e7eb;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* =========================================================
ENCABEZADO DE LA POLÍTICA
========================================================= */

.encabezadoPolitica {
padding-bottom: clamp(20px, 4vw, 30px);
margin-bottom: clamp(25px, 4vw, 35px);
border-bottom: 1px solid #e5e7eb;
}

.etiquetaPolitica {
display: inline-block;
margin-bottom: 15px;
padding: 6px 12px;
border-radius: 20px;
background-color: #f1f5f9;
color: #475569;
font-size: clamp(12px, 1.5vw, 13px);
font-weight: 600;
}

.encabezadoPolitica h2 {
margin-bottom: 10px;
color: #111827;
font-size: clamp(28px, 5vw, 42px);
line-height: 1.2;
letter-spacing: -1px;
overflow-wrap: break-word;
}

.subtituloPolitica {
color: #6b7280;
font-size: clamp(13px, 1.5vw, 14px);
}

/* =========================================================
SECCIONES
========================================================= */

.seccionPolitica {
margin-bottom: clamp(30px, 5vw, 40px);
}

.seccionPolitica h3 {
margin-bottom: 15px;
color: #111827;
font-size: clamp(19px, 2.5vw, 24px);
line-height: 1.4;
}

.seccionPolitica p {
margin-bottom: 16px;
color: #4b5563;
font-size: clamp(15px, 1.5vw, 16px);
line-height: 1.8;
overflow-wrap: break-word;
}

.seccionPolitica strong {
color: #1f2937;
font-weight: 700;
}

/* =========================================================
LISTAS
========================================================= */

.listaPolitica {
margin: 15px 0 20px 25px;
padding-left: 10px;
}

.listaPolitica li {
margin-bottom: 12px;
padding-left: 5px;
color: #4b5563;
font-size: clamp(15px, 1.5vw, 16px);
line-height: 1.7;
overflow-wrap: break-word;
}

.listaPolitica li::marker {
color: #64748b;
}

/* =========================================================
AVISO IMPORTANTE
========================================================= */

.avisoPolitica {
margin-top: clamp(35px, 5vw, 50px);
padding: clamp(18px, 4vw, 25px);
background-color: #f8fafc;
border-left: 4px solid #64748b;
border-radius: 8px;
}

.avisoPolitica strong {
display: block;
margin-bottom: 8px;
color: #1f2937;
font-size: clamp(15px, 1.5vw, 16px);
}

.avisoPolitica p {
margin: 0;
color: #4b5563;
font-size: clamp(14px, 1.5vw, 15px);
line-height: 1.7;
}

/* =========================================================
PIE DE PÁGINA
========================================================= */

.piePolitica {
width: 100%;
padding: clamp(20px, 4vw, 30px) 15px;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #e5e7eb;
}

.piePolitica p {
margin-bottom: 12px;
color: #6b7280;
font-size: clamp(13px, 1.5vw, 14px);
}

/* =========================================================
ENLACES LEGALES
========================================================= */

.enlacesLegales {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: clamp(12px, 1.5vw, 14px);
}

.enlacesLegales a {
color: #4b5563;
text-decoration: none;
transition: color 0.2s ease,
text-decoration 0.2s ease;
}

.enlacesLegales a {
color: #111827;
text-decoration: underline;
}

.enlacesLegales span {
color: #9ca3af;
user-select: none;
}

/* =========================================================
TABLETS
========================================================= */

@media (max-width: 768px) {

.contenidoPolitica {
    padding: 35px 25px;
    border-radius: 12px;
}

.seccionPolitica {
    margin-bottom: 32px;
}

}

/* =========================================================
MÓVILES
========================================================= */

@media (max-width: 600px) {

.contenedorEncabezado {
    padding: 14px 15px;
}

.contenedorPolitica {
    padding: 20px 10px;
}

.contenidoPolitica {
    padding: 25px 20px;
    border-radius: 10px;
}

.encabezadoPolitica {
    margin-bottom: 28px;
    padding-bottom: 25px;
}

.seccionPolitica {
    margin-bottom: 32px;
}

.seccionPolitica p,
.listaPolitica li {
    font-size: 15px;
    line-height: 1.7;
}

.listaPolitica {
    margin-left: 18px;
    padding-left: 8px;
}

.avisoPolitica {
    padding: 20px;
}

.enlacesLegales {
    gap: 6px;
    line-height: 1.8;
}

}

/* =========================================================
MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

.contenedorPolitica {
    padding: 15px 8px;
}

.contenidoPolitica {
    padding: 22px 16px;
    border-radius: 8px;
}

.encabezadoPolitica h2 {
    font-size: 27px;
}

.seccionPolitica h3 {
    font-size: 19px;
}

.seccionPolitica p,
.listaPolitica li {
    font-size: 14px;
}

.enlacesLegales {
    gap: 4px;
}

}

.contenedorUsuario {
     width: min(100% - 30px, 600px);
    margin: clamp(20px, 5vw, 50px) auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 200px;
}

/* =========================================================
   CONTENEDOR DE AUTORIZACIÓN - RESPONSIVE CON CLAMP()
   ========================================================= */

.contenedorcheck {
    width: 100%;
    box-sizing: border-box;

    margin: clamp(10px, 2vw, 20px) 0;
    padding: clamp(10px, 1.5vw, 18px);

    display: flex;
    align-items: flex-start;

    background-color: #f8f9fa;
    border: clamp(1px, 0.1vw, 2px) solid #dcdfe3;
    border-radius: clamp(6px, 1vw, 12px);

    font-size: clamp(12px, 1.2vw, 15px);
    line-height: clamp(1.4, 1.5vw, 1.7);

    color: #333;
}

/* =========================================================
   LABEL
   ========================================================= */

.contenedorcheck label {
    width: 100%;

    display: flex;
    align-items: flex-start;

    gap: clamp(6px, 1vw, 10px);

    cursor: pointer;
}

/* =========================================================
   CHECKBOX
   ========================================================= */

.contenedorcheck input[type="checkbox"] {
    flex: 0 0 auto;

    width: clamp(15px, 1.5vw, 19px);
    height: clamp(15px, 1.5vw, 19px);

    margin: clamp(1px, 0.3vw, 3px) 0 0 0;

    cursor: pointer;
}

/* =========================================================
   ENLACE POLÍTICA DE PRIVACIDAD
   ========================================================= */

.contenedorcheck a {
    color: #0066cc;

    font-weight: 600;

    text-decoration: underline;

    transition: opacity 0.2s ease;
}

.contenedorcheck a:hover {
    opacity: 0.75;
}

.whatsapp-float{
    position:fixed;

    right: clamp(80px, 12vw, 180px);
    bottom:clamp(12px, 2.5vw, 40px);

    width:clamp(48px, 5vw, 75px);
    height:clamp(48px, 5vw, 75px);

    display:flex;
    justify-content:center;
    align-items:center;

    background:#25D366;

    border-radius:50%;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);

    z-index:99999;

    transition:
        transform .25s ease,
        background .25s ease;
}


.whatsapp-float:hover{
    transform:scale(1.12);
    background:#20bd5a;
}


.whatsapp-float svg{
    width:65%;
    height:65%;
    display:block;
}

@keyframes whatsappPulse {
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}


.whatsapp-float{
    animation:whatsappPulse 2.5s infinite;
}

.planes-container{

    width:min(92%,1200px);

    margin:40px auto;

    text-align:center;
}



.titulo-planes h2{

    margin:0;

    color:#183552;

    font-size:clamp(1.4rem,3vw,2.2rem);

}



.titulo-planes p{

    color:#64748b;

    font-size:clamp(.85rem,1.5vw,1.1rem);
    text-align: center;

}



/* CONTENEDOR HORIZONTAL */

.planes-scroll{

    display:flex;

    gap:20px;

    margin-top:30px;

    overflow-x:auto;

    padding:10px 5px 20px;

    scroll-behavior:smooth;

    scrollbar-width:thin;

}



/* TARJETAS */

.tarjeta-plan{

    flex:0 0 clamp(260px,30vw,340px);

    background:white;

    border-radius:18px;

    /*padding:clamp(20px,3vw,35px);*/
    padding: clamp(16px, 2.5vw, 28px);

    border:1px solid #dbe5f0;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);

    position:relative;

    text-align:left;

    transition:.25s ease;
     cursor: pointer;

}



.tarjeta-plan:hover{

    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(15,23,42,.15);

}



.tarjeta-plan h3{

    text-align:center;

    color:#1e3a8a;

    font-size:clamp(1.1rem,2vw,1.4rem);

}



.precio-plan{

    text-align:center;

    font-size:clamp(1.3rem,3vw,2rem);

    font-weight:800;

    color:#2563eb;

    margin:15px 0;

}



.tarjeta-plan ul{

    list-style:none;

    padding:0;

    color:#475569;

    line-height:2;

}



/* TARJETA DESTACADA */

.destacado{

    border:2px solid #3FA9F5;

}



.etiqueta{

    position:absolute;

    top:-13px;

    left:50%;

    transform:translateX(-50%);

    background:#2563eb;

    color:white;

    padding:5px 18px;

    border-radius:20px;

    font-size:.75rem;

    font-weight:700;

}



/* Scroll más limpio en móvil */

.planes-scroll::-webkit-scrollbar{

    height:6px;

}


.planes-scroll::-webkit-scrollbar-thumb{

    background:#3FA9F5;

    border-radius:10px;

}

.link-registro{

    display:inline-block;

    margin-left:6px;

    padding:6px 14px;

    color:white;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3fa9f5
    );

    border-radius:20px;

    font-weight:700;

    text-decoration:none;

    font-size:clamp(.85rem,1.3vw,1rem);

    box-shadow:
        0 5px 15px rgba(37,99,235,.25);

    transition:.25s ease;
}


.link-registro:hover{

    transform:translateY(-2px);

    background:linear-gradient(
        135deg,
        #1d4ed8,
        #2563eb
    );

    box-shadow:
        0 8px 20px rgba(37,99,235,.35);
}

.tresBotones{
    display: flex;
    justify-content:space-between;
}

footer p {
    text-align: center;
}

.colombia {
    white-space: nowrap;
    color: #003893;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    line-height: 1.4;
}

.colombia::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;

    background: linear-gradient(
        to right,
        #FCD116 0%,
        #FCD116 33.33%,
        #003893 33.33%,
        #003893 66.66%,
        #CE1126 66.66%,
        #CE1126 100%
    );

    border-radius: 4px;
}

.porque-appbienes {
    width: min(90%, 1200px);
    margin: clamp(15px, 3vw, 25px) auto;
    /*padding: clamp(12px, 2vw, 18px) clamp(15px, 3vw, 25px);*/
    background: #f8f9fa;
    border-radius: 12px;
   /* border: 1px solid #e5e5e5; */
}

.porque-appbienes h2 {
    margin: 0 0 clamp(6px, 1vw, 10px) 0;
    font-size: clamp(18px, 2.2vw, 22px);
    color: #1d3557;
    text-align: center;
}

.porque-appbienes p {
    margin: 0 auto clamp(10px, 2vw, 15px) auto;
    max-width: 850px;
    text-align: center;
    font-size: clamp(13px, 1.5vw, 15px);
    color: #555;
    line-height: 1.4;
}


.beneficios-appbienes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.8vw, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px;
    margin-top: 10px;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
}

/* Chrome, Edge, Safari */
.beneficios-appbienes::-webkit-scrollbar {
    height: 6px;
}

.beneficios-appbienes::-webkit-scrollbar-track {
    background: transparent;
}

.beneficios-appbienes::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 10px;
}

.beneficios-appbienes::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

.beneficios-appbienes div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;

    background: #DFF3E3;
    padding: clamp(10px, 1.6vw, 13px) clamp(14px, 2vw, 20px);

    border: 1px solid #e6ebf1;
    border-radius: 999px;

    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 500;
    color: #374151;
    white-space: nowrap;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all .25s ease;
}

.beneficios-appbienes div:hover {
    background: #ffffff;
    border-color: #d6e4ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* para departamentos */

.beneficios-appbienesC {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.8vw, 18px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px;
    margin-top: 10px;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
}

/* Chrome, Edge, Safari */
.beneficios-appbienesC::-webkit-scrollbar {
    height: 6px;
}

.beneficios-appbienesC::-webkit-scrollbar-track {
    background: transparent;
}

.beneficios-appbienesC::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 10px;
}

.beneficios-appbienesC::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

.beneficios-appbienesC div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;

    background: #f8fafc;
    padding: clamp(10px, 1.6vw, 13px) clamp(14px, 2vw, 20px);

    border: 1px solid #e6ebf1;
    border-radius: 999px;

    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 500;
    color: #374151;
    white-space: nowrap;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all .25s ease;
}

.beneficios-appbienesC div:hover {
    background: #ffffff;
    border-color: #d6e4ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.beneficios-appbienesC p {
    color: #0099cc;
    background: #f0f6ff;
    border-radius: 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/*  fin para departamentos */

/* Móviles pequeños */
@media (max-width: 480px) {

    .porque-appbienes {
        width: 94%;
        padding: 12px;
    }

    .porque-appbienes h2 {
        font-size: 18px;
    }

    .porque-appbienes p {
        font-size: 13px;
    }

    .beneficios-appbienes {
        padding: 10px;
        gap: 10px;
    }

    .beneficios-appbienes div {
        padding: 9px 15px;
        font-size: 13px;
    }
}


.contenedor-input-barrio {
    position: relative;
    flex: 1;
}


.lista-barrios {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 6px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 99999;
}


.opcion-barrio {
    padding: 8px;
    cursor: pointer;
    background: white;
}


.opcion-barrio:hover {
    background: #eee;
}