* {margin:0;padding:0}
*{box-sizing:border-box}
html,body{
  margin-top:0px;
  margin-bottom:0px!important;
  min-height:100%;
  height:100%;
  height:auto;
  color:#000000;
  font-size: 11pt;
   font-family: arial, helvetica, sans-serif;
   line-height:normal;
   text-align:justify;
 background:#f7f7f7;
}

a {color:#FFFFFF; text-decoration:none}
a:hover {color:#e1e1e1; text-decoration:none}
ul,li {list-style:none;}
h1{width:96%; padding:1% 0 1% 0; color:#000; border:none; font-size:16pt; margin:0;display:block;clear:both;font-weight:normal}
h3 {text-align:left; font-size:18pt; margin-bottom:10px; padding:0; font-weight:normal; width:auto;}

#contenedor {
    width:100%; 
    margin-left: auto; 
    margin-right: auto;
	text-align:left;
	overflow:auto;
	z-index:200;
	clear:both;

	}
#contenido{border:0; margin:45px auto 10px auto; height:auto; overflow:auto; width:100%;max-width:1200px; border-bottom:none;}


/*menu principal*/
/*menu principal*/
#logo{width:100%;margin:0 0 0 0;z-index:999999;position:fixed}
#top_r{margin: 0 auto; padding:0; width: 100%; background:#fe6e00;border-bottom:1px solid #e1e1e1}
#top_r header{
    box-sizing: border-box;
    padding: 0 0 0 0;
 }
#top_r header span.nwa{float:left;text-align:center;margin:0;padding:1%;height:auto;background:#FDFFD9;}
#top_r header span.nwa a{color:red;font-size:9pt}
#top_r header span.iso {
    float: left;margin:0;
    padding:5px 0 5px 5px;height:40px;
}
#top_r header span.iso img {
    height: 100%;
    margin:0;
    border:0;
}

.ver-menu {
    background-color: transparent;
    background-position: center center;
    border: 0;
    display: block;
    float: right;
    height: 35px;
    margin:10px 1.3em 0 0;
    width: 35px;
}
.ver-menu a {color:#fff;font-size:8pt;vertical-align:middle}
.ver-menu a span {
    display: inline-block;
    height: 30px;
    text-indent: -9999px;
    width: 30px;
}
.ver-menu .cerrar {
    background-image: url("../gif/close-menu.png");
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
}
.ver-menu .abrir {
    background-image: url("../gif/open-menu.png");
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
}

ul.items {
    clear: both;
    height: 0;
    overflow:auto;
    text-align:center;
    transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al voover a su estado unicial*/
}
ul.items h1{font-size:12pt;color:#000;width:96%;padding: 0 0 2px 1%}
#desplegar:target ul.items {
    background: #ffffff none repeat scroll 0 0;
    height: auto;
    transition: height 0.4s ease-in-out 0s, background-color 0.4s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al abrirse*/
}


/*Al hacer clic sobre el enlace que abre el menú éste desaparece*/

.cerrar { 
   display:none;
}
        
#desplegar:target .abrir {
      display: none;
}

/*Al hacer clic sobre el enlace que abre el menú aparece el enlace .close que previamente estaba oculto*/

#desplegar:target .cerrar {
        display: block;
}
  
/*Estilos menu*/

ul.items li {
    display: inline-block;
}

ul.items a {
	font-size:8.5pt;
    border-top: 0;
    color: #000;
    display: block;
    height: 2.4em;
    line-height: 14pt;
    margin: 5px 5px 5px 5px;
    text-decoration:none;text-transform:uppercase
}
ul.items li:first-child a {
    border-top: 2px solid transparent;
}
ul.items li.um a {
	font-size:8.5pt;
    border-top: 0;
    color: #ff0000;
    display: block;
    height: 2.4em;
    line-height: 14pt;
    margin: 0 5px 5px 5px;
    text-decoration:none;text-transform:uppercase
}
ul.items li.altaus a {
	font-size:8.5pt;
    border-top: 0;
    color: blue;
    display: block;
    height: 2.4em;
    line-height: 14pt;
    margin: 0 5px 5px 5px;font-weight:bold;
    text-decoration:none;text-transform:uppercase
}
ul.items a:hover{color:#fe6e00}
/*nuevo*/
/* Usamos un prefijo único para que nada se pise */

/* ================================================================
   1. BUSCADOR DE MESES (HOME)
   ================================================================ */
#seccion-buscador-meses { clear: both; display: block; width: 100%; margin: 20px 0; font-family: 'Segoe UI', sans-serif; }
#seccion-buscador-meses .header-meses { text-align: center; padding: 30px 10px; }
#seccion-buscador-meses .header-meses h1 { font-size: 1.8em; color: #333; margin-bottom: 5px; }

#seccion-buscador-meses .grid-meses {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

#seccion-buscador-meses .tarjeta-mes {
    background: #ffffff !important;
    border: 1px solid #eee !important;
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

#seccion-buscador-meses .tarjeta-mes:hover {
    transform: translateY(-5px);
    border-color: #25D366 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

#seccion-buscador-meses .txt-nombre-mes { display: block; font-size: 1.2em; font-weight: 800; color: #333; margin-bottom: 5px; }
#seccion-buscador-meses .txt-contador { display: block; font-size: 0.9em; color: #25D366; font-weight: 600; margin-bottom: 15px; }
#seccion-buscador-meses .indicador-ver { font-size: 0.75em; font-weight: bold; color: #999; border: 1px solid #ddd; padding: 5px 12px; border-radius: 20px; transition: all 0.3s; }
#seccion-buscador-meses .tarjeta-mes:hover .indicador-ver { background: #25D366; color: #fff; border-color: #25D366; }

/* ================================================================
   2. LISTADO DE RESULTADOS (FILTROS Y PILLS)
   ================================================================ */
#resultados-busqueda { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: 'Segoe UI', Roboto, sans-serif; }
.migas-de-pan { font-size: 0.85em; color: #888; margin-bottom: 10px; }
.migas-de-pan a { text-decoration: none; color: #fe6e00; }
.header-listado h1 { font-size: 1.8em; color: #222; margin-bottom: 20px; font-weight: 500; }

.pills-container { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 25px; }
.pill-link { display: inline-block; padding: 8px 16px; background: #f0f2f5; color: #555; text-decoration: none; border-radius: 50px; font-size: 0.9em; transition: 0.2s; border: 1px solid transparent; }
.pill-link:hover { background: #e4e6e9; color: #000; }
.pill-activa { background: #25D366; color: white; font-weight: bold; }
.pill-activa-naranja { background: #ce6104 !important; color: white !important; font-weight: bold; }

/* ================================================================
   3. BARRA DE HERRAMIENTAS (REDISEÑADA PARA MÓVIL)
   ================================================================ */
.barra-herramientas-listado {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
    align-items: flex-end;
}

.grupo-filtro { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.grupo-filtro label { font-size: 0.8em; font-weight: bold; color: #888; text-transform: uppercase; }
.grupo-filtro select { padding: 10px; border-radius: 8px; border: 1px solid #ccc; background: #fff; font-size: 0.95em; outline: none; width: 100%; }
.grupo-filtro select:focus { border-color: #25D366; }

/* ================================================================
   4. FICHAS DE ALOJAMIENTO (LISTA Y GRID)
   ================================================================ */
.listado-tarjetas { display: flex; flex-direction: column; gap: 20px; }
.rating-listado {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 12px 0;
}

.rating-listado .estrellas {
    color: #ffc107; /* Dorado */
    font-size: 0.85rem;
}

.rating-listado .txt-calificacion {
    font-size: 0.8rem;
    color: #555;
}

.rating-listado .txt-calificacion strong {
    color: #007bff; /* Un azul suave para resaltar el "Excelente" */
}

.sin-resenas {
    font-size: 0.75rem;
    color: #bbb;
    font-style: italic;
}
.ficha-alojamiento {
    display: flex; 
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #eef2f5;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ficha-alojamiento:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.contenedor-imagen { width: 300px; flex-shrink: 0; position: relative; }
.contenedor-imagen img { width: 100%; height: 100%; object-fit: cover; }
.cuerpo-ficha { display: flex; padding: 25px; width: 100%; gap: 20px; }

.info-basica { flex: 2; display: flex; flex-direction: column; gap: 10px; }
.info-basica h2 { font-size: 1.5em; color: #222; margin: 0; font-weight: 400; }
.distancia { font-size: 0.9em; color: #666; display: flex; align-items: center; gap: 6px; }
.distancia i { color: #25D366; }
.iconos-servicios { display: flex; gap: 12px; font-size: 1.1em; color: #444; }

.txt-periodo {
    display: flex;
    /*width:fit-content;*/
    align-items: center; 
    gap: 8px;
    background: #fff3e0;
    color: #e65100;
    padding: 8px 12px; 
    border-radius: 8px;
    font-size: 0.85em; 
    font-weight: 700; 
    }

.bloque-monto {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea los precios a la derecha */
    gap: 4px;
}



/* El precio viejo (tachado) */
.precio-tachado {
    color: #888;
    text-decoration: line-through;
    font-size: 0.9rem;
    margin-right: 8px;
}

.badge-descuento {
    background-color: #CF3E21;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
    
    /* Sombra para dar profundidad */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
    /* Inclinación leve (estilo etiqueta) */
    transform: rotate(-2deg);
    
    /* Tu favorito: el pulso */
    animation: pulse-green 2s infinite;
    
    /* Para que no se vea el corte de la rotación */
    backface-visibility: hidden;
}
.badge-promo {
    background-color: #009000;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
    width:80px;
    text-align:center;
    
    /* Sombra para dar profundidad */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     
    /* Tu favorito: el pulso */
    animation: pulse-green 5s infinite;

}
/* Ajustamos el pulso para que mantenga la inclinación */
@keyframes pulse-green {
    0% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(-2deg) scale(1.1); }
    100% { transform: rotate(-2deg) scale(1); }
}

/* Ajuste para la unidad de tiempo */
.unidad-tiempo {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-precio-accion { flex: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; }
.precio-destacado { font-size: 1.7em; font-weight: 600; color: #111; margin: 0;color:#f66e00 }
.pax-tag { background: #e3f2fd; color: #1565c0; padding: 4px 10px; border-radius: 20px; font-size: 0.75em; font-weight: 700; }
.btn-ver-tarifas { background: #25D366; color: white; padding: 12px 20px; border-radius: 10px; text-decoration: none; font-weight: bold; transition: 0.2s; }

/* MODALIDAD GRID */
.listado-tarjetas.vista-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
.listado-tarjetas.vista-grid .ficha-alojamiento { flex-direction: column; }
.listado-tarjetas.vista-grid .contenedor-imagen { width: 100%; height: 200px; }
.listado-tarjetas.vista-grid .cuerpo-ficha { flex-direction: column; padding: 20px; }
.listado-tarjetas.vista-grid .cuerpo-ficha .info-basica h2{font-size: 1.3em; color: #222; margin: 0; font-weight: 400;}
.listado-tarjetas.vista-grid .info-precio-accion { align-items: flex-start; text-align: left; border-top: 1px solid #f0f0f0; padding-top: 15px; margin-top: 10px; }
.listado-tarjetas.vista-grid .txt-periodo { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   5. RESPONSIVE (MÓVILES)
   ================================================================ */
@media (max-width: 768px) {
    .barra-herramientas-listado { padding: 15px; gap: 10px; }
    .grupo-filtro { flex: 1 1 calc(50% - 10px); min-width: 140px; }
    .grupo-filtro:nth-child(3) { flex: 1 1 100%; } /* Ordenar ocupa todo el ancho */
    
    .cuerpo-ficha { padding: 15px; flex-direction: column; }
    .contenedor-imagen { width: 100%; height: 180px; }
    .ficha-alojamiento { flex-direction: column; }
    .info-precio-accion { align-items: flex-start; text-align: left; border-top: 1px solid #eee; padding-top: 15px; }
}

@media (max-width: 480px) {
    #seccion-buscador-meses .grid-meses { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    #seccion-buscador-meses .indicador-ver { display: none; }
    .grupo-filtro { flex: 1 1 100%; }
    .controles-vista { display: none; } /* En móviles forzamos GRID y quitamos botones */
}

/*paginador*/
.lista-paginas { display: flex; list-style: none; gap: 10px; justify-content: center; padding: 20px 0; }
.lista-paginas a { padding: 8px 15px; border-radius: 20px; border: 1px solid #ccc; text-decoration: none; color: #333; }
.lista-paginas a.activa { background: #fe6e00; color: white; border-color: #fe6e10; font-weight: bold; }

/* ficha*/
#fotos_ng {
    float: left;
    width: 40%;
    max-width: 460px;
    margin: 0 15px 15px 0;
}

.slider-principal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar barra de scroll para que se vea limpio */
.slider-principal::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Estilo de las flechas */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(254,110,0,0.8);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 3px;
    z-index: 10;
    transition: background 0.3s;
}
.nav-arrow:hover { background: rgba(254,110,0,0.5); }
.prev { left: 10px; }
.next { right: 10px; }


#col_r_det{float:right; width:55%;min-width:700px;height:auto;overflow:auto;margin:0 0 5px 0;box-sizing:border-box}
#detalle_aloj {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.mimes {
    font-size: 10px;          /* Legible pero pequeño */
    font-weight: 600;
    color: #fe6e00;           /* Naranja del portal */
    text-transform: uppercase;
    display: inline-block;
    padding: 2px 5px;
    margin: 0 3px 3px 0;
    background: #fff0e6;      /* Un fondo naranja muy tenue */
    border-radius: 3px;       /* Bordes suavizados */
    font-style: normal;
    letter-spacing: 0.5px;
}
.midia {
    font-size: 10px;          /* Legible pero pequeño */
    font-weight: 600;
    color: #094CC8;           /* Naranja del portal */
    text-transform: uppercase;
    display: inline-block;
    padding: 2px 5px;
    margin: 0 3px 3px 0;
    background: #BBD2FC;      /* Un fondo naranja muy tenue */
    border-radius: 3px;       /* Bordes suavizados */
    font-style: normal;
    letter-spacing: 0.5px;
}
.tarjeta-precio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pax-count {
    font-weight: bold;
    color: #444;
}

.pax-count i {
    color: #FE6E00;
    margin-right: 5px;
}

.price-new {
    font-size: 1.4em;
    font-weight: 800;
    color: #2c3e50;
}

.price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
    margin-right: 8px;
}

.btn-whatsapp-modern {
    display: inline-block; /* Cambiado de block a inline-block */
    width: 90%;            /* Ajustá el ancho a tu gusto */
    box-sizing: border-box; /* Crucial para que el padding no sume al ancho */
    background: #25D366;
    color: #fff !important;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin: 20px auto 10px auto; /* Centrado horizontal con auto */
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1.1em;
}

.btn-whatsapp-modern:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.wahm{display:none;}
/*.badge-descuento {
    background: #e74c3c;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}*/
.i-ex {
    display: inline-block; /* Permite que tengan margen y no se corten a mitad de palabra */
    margin-right: 12px;
    color: #666;
    white-space: nowrap; /* Evita que el punto quede solo arriba y el texto abajo */
}

.i-ex • {
    color: #FE6E00; /* Le damos color al puntito para que resalte */
    margin-right: 4px;
}
.contenedor-ficha {
    display: flex;
    flex-wrap: wrap; /* Permite que se caigan en el celu */
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    padding: 20px;
    }
#bloque-a{flex: 1 1 75%;min-width: 650px;}
/* Contenedor principal */
#caracteristicas {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}

/* Títulos de secciones */
.titulo-serv {
    font-size: 1.25em;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
    margin: 30px 0 15px 0;
    display: flex;
    align-items: center;
    font-weight: 700;
}

/* El truco de las columnas */
.lista-serv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}

/* Estilo de cada ítem de la lista (asumiendo que son <li>) */
.lista-serv li {
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: flex-start;
}

/* Icono de check para los servicios */
.lista-serv li::before {
    content: "\f00c"; /* Check de FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #25D366; /* Verde como el botón de WA */
    margin-right: 10px;
    font-size: 0.85em;
    margin-top: 3px;
}

/* Estilo específico para Restricciones (si querés que el icono sea una X roja) */
.seccion-restricciones .lista-serv li::before {
    content: "\f05e"; /* Icono de prohibido */
    color: #e74c3c;
}

/* Caja de condiciones */
.texto-condiciones {
    font-size: 0.9em;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}
/* Contenedor Principal del Formulario */
#formulario_de_consulta {
    background: #ffffff;
    padding: 10px 40px;
    border-radius: 16px;
    margin-top: 20px;
    border: 1px solid #eef0f2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

#formulario_de_consulta h3 {
    color: #1a1a1a;
    font-size: 1.6em;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Grilla para agrupar inputs */
.grid-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Estilo de los campos (Inputs, Select, Textarea) */
#form-consulta input, 
#form-consulta select, 
#form-consulta textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #dce0e4;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
}

/* Efecto Focus: Cuando el usuario hace clic para escribir */
#form-consulta input:focus, 
#form-consulta select:focus, 
#form-consulta textarea:focus {
    outline: none;
    border-color: #FE6E00;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(254, 110, 0, 0.1);
}

/* El textarea ocupa las dos columnas */
#form-consulta textarea {
    grid-column: span 2;
    resize: vertical;
    min-height: 120px;
}

/* Contenedor del Captcha de Cloudflare */
.cf-turnstile {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

/* Botones */
.botones-box {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-enviar {
    flex: 2;
    background: linear-gradient(135deg, #FE6E00 0%, #ff852d 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
}

.btn-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 110, 0, 0.3);
}

.btn-borrar {
    flex: 1;
    background: #f0f2f5;
    color: #666;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive: En celulares todo a una columna */
@media (max-width: 768px) {
    #formulario_de_consulta {
        padding: 25px 15px;
    }
    
    .grid-form {
        grid-template-columns: 1fr;
    }
    
    #form-consulta textarea {
        grid-column: span 1;
    }
    
    .botones-box {
        flex-direction: column;
    }
}
#bloque-b {flex: 1 1 20%;margin-top:20px}
/*bloque B cards*/
.card-canal {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.card-canal:hover {
    transform: translateY(-5px);
}

.card-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.wa .card-header { background: #25D366; }
.ig .card-header { background: #E1306C; }

.card-header i { font-size: 1.8em; }
.card-header h4 { margin: 0; font-size: 1.1em; font-weight: 600; }

.card-body {
    padding: 20px;
    text-align: center;
}

.card-body p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
}

.qr-container img {
    max-width: 130px;
    height: auto;
    border: 5px solid #f9f9f9;
    border-radius: 10px;
}

/* Botones Estilizados */
.btn-comunidad {
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.3s;
}

.btn-wa { background: #e8f9ee; color: #25D366; border: 1px solid #25D366; }
.btn-wa:hover { background: #25D366; color: #fff; }

.btn-ig { background: #fdeef3; color: #E1306C; border: 1px solid #E1306C; }
.btn-ig:hover { background: #E1306C; color: #fff; }

/* Control de visibilidad PC vs Móvil */
.txt-movil, .btn-comunidad { display: none; }
.card-canal-clickeable {
    text-decoration: none; /* Quitamos el subrayado */
    display: block; /* Ocupa todo el ancho */
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    color: #333; /* Color de texto por defecto */
}

/* Efecto hover profesional */
.card-canal-clickeable:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* CABECERA CON DEGRADADO OFICIAL DE INSTAGRAM */
.card-header-gradient {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff; /* Texto blanco sobre el degradado */
    
    /* Degradado oficial de Instagram: Rosa -> Naranja -> Amarillo */
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.card-header-gradient i { font-size: 1.8em; }
.card-header-gradient h4 { margin: 0; font-size: 1.2em; font-weight: 600; }

/* CUERPO CENTRADO COMO EN LA IMAGEN */
.card-body-centered {
    padding: 25px;
    text-align: center;
}

.card-body-centered p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* El handle de usuario sutil abajo */
.user-handle {
    font-size: 0.8em;
    font-weight: bold;
    color: #E1306C; /* Un rosa para que resalte sutilmente */
    text-transform: lowercase;
}

@media (max-width: 768px) {
    .pc { display: none; }
    .txt-pc { display: none; }
    .txt-movil { display: block; }
    .btn-comunidad { display: block; }
}

@media (min-width: 769px) {
    .pc { display: block; }
    .txt-pc { display: block; }
}




/* ==========================================
   PIE DE PÁGINA
   ========================================== */
#pie {
    width: 100%; /* Ocupa el ancho total del contenedor padre */
    background: #ffffff;
    padding: 40px 0;
    border-top: 1px solid #e1e1e1;
    font-family: sans-serif;
}

/* Contenedor de logos y redes (La parte de arriba) */
#pie .pie-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 0 20px;
}

/* Contenedor principal del pie */
#pie {
    width: 100%;
    padding: 10px 0;
    background: #fff;
    border-top: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column; /* Apilamos los bloques uno bajo otro */
    align-items: center;
}
#pie-contenedor {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinea al tope */
    gap: 40px;
    padding: 20px 10px;
    width: 100%;
    max-width: 1200px; /* Tu ancho de siempre */
    margin: 0 auto;
}

/* Columna Izquierda: Identidad (30%) */
.pie-identidad {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 20px;
   
}

.logo-principal img {
    height: 45px;
    width: auto;
    text-align:center
}

.logos-secundarios {
    display: flex;
    gap: 15px;
    align-items: center;
    opacity: 0.8;
}

.logos-secundarios img {
    height: 35px;
    width: auto;text-align:center
}
.redes-pie {
    display: flex;
    gap: 18px; /* Espacio entre iconos */
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0; /* Una separación sutil de los logos de arriba */
}

.redes-pie a {
    color: #888; /* Color neutro para no ensuciar */
    font-size: 22px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Colores de marca al pasar el mouse */
.redes-pie a[title="Instagram"]:hover { color: #E1306C; }
.redes-pie a[title="YouTube"]:hover   { color: #FF0000; }
.redes-pie a[title="Newsletter"]:hover { color: #0086A8; }
.redes-pie a[title="Facebook"]:hover  { color: #1877F2; }

/* Efecto sutil de salto */
.redes-pie a:hover {
    transform: translateY(-3px);
}
/* Columna Derecha: Menús (70%) */
.pie-navegacion {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de links */
    gap: 20px;
}

.col-menu h4 {
    font-size: 11pt;
    color: #0086A8;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.col-menu li {
    list-style: none;
    margin-bottom: 5px;
}

.col-menu a {
    text-decoration: none;
    color: #444;
    font-size: 9.5pt;
}

.col-menu a:hover { color: #fe6e00; }

/* Copyright (La parte de abajo) */
#pie .pie-copyright {
    margin-top: 10px;
    padding: 20px;
    font-size: 8.5pt;
    color: #888;
    line-height: 1.6;
    border-top: 1px solid #f5f5f5;
    text-align: center;
}
#pie .pie-copyright a{color:#fe6e00}
#pie .pie-copyright a:hover{color:#000}

/* ================================================================
   RECORTE DE INCONSISTENCIAS Y ADAPTACIÓN FINAL
   ================================================================ */

/* 1. Reset de anchos fijos que rompen el móvil */
#bloque-a, #bloque-b {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin-right: 0 !important;
}

/* 2. Contenedor Flexible para la Ficha */
.contenedor-ficha {
    display: flex;
    flex-direction: row; /* PC */
    gap: 20px;
}

/* 3. MEDIA QUERIES PARA TABLETS (iPad / Tablets Android) */
@media (max-width: 1024px) {
    #fotos_ng {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    
    .contenedor-ficha {
        flex-direction: column; /* Apilamos los bloques */
    }

    #bloque-a, #bloque-b {
        width: 100% !important;
    }
}

/* ==========================================
   RESPONSIVE ficha
   ========================================== */
@media (max-width: 768px) {
    html, body {
        font-size: 16px; /* Tamaño base cómodo para leer en mano */
        text-align: left; /* El justify en móviles a veces deja huecos feos */
    }
    #contenido{width:96%;margin:50px auto 0 auto;}
    #fotos_ng { float: none; width: 100%; max-width: 100%; margin-bottom: 20px; }
    #col_r_det{float:none; width:100%;min-width:0;height:auto;overflow:auto;margin:0 0 5px 0;box-sizing:border-box}

    h1 {
        font-size: 1.5em !important;
        line-height: 1.2;
    }

    /* Ajuste de formulario para que no quede pegado a los bordes */
    #formulario_de_consulta {
        padding: 20px 15px;
    }

    /* Botón de WhatsApp a ancho total y más grande para el pulgar */
    .btn-whatsapp-modern {
        width: 100%;
        font-size: 1.2em;
        padding: 18px;
    }
.wahm{display:block;}
.wahpc{display:none;}
    /* Ajuste de las tarjetas de precios en la ficha */
    .tarjeta-precio {
        /*flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 15px 0;*/
            display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    }

    .price-new {
        font-size: 1.2em;
    }
    #pie-contenedor {
        flex-direction: column; /* Dejamos de estar uno al lado del otro */
        align-items: center;    /* Centramos todo el contenido */
        gap: 30px;
        text-align: center;
    }

    .pie-identidad {
        align-items: center; /* Centramos logo y redes */
        width: 100%;
    }

    .logos-secundarios {
        justify-content: center; /* Centramos logos amigos */
    }

    .pie-navegacion {
        width: 100%;
        /* Pasamos de 3 columnas a 1 o 2, según prefieras. 
           Para móvil, 1 columna es más legible y evita textos cortados */
        grid-template-columns: 1fr; 
        gap: 25px;
    }

    .col-menu {
        border-bottom: 1px solid #f0f0f0; /* Una línea divisoria suave entre bloques */
        padding-bottom: 15px;
    }

    .col-menu:last-child {
        border-bottom: none;
    }

    .redes-pie {
        justify-content: center; /* Centramos iconos sociales */
    }
}

/* 5. Corrección de imágenes para que no se estiren */
img {
    max-width: 100%;
    height: auto;
}