* {margin:0;padding:0}
*, *:before, *:after {
  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}

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

	}
#contenido{border:0; margin:0 auto 10px auto; height:auto; overflow:auto; width:100%;max-width:1200px; border-bottom:none;}
@media (max-width: 1024px) {
    #contenido { width:98%;margin:0 1% 0 1% }
}
@media (max-width: 768px) {
    #contenido { width:95%;margin:0 auto}
}

/* ==========================================
   menú
   ========================================== */
#logo{width:100%;margin:0 0 0 0;z-index:999999;position:fixed}
/* Contenedor Superior */
#top_r {
    width: 100%;
    background: #fe6e00;
    border-bottom: 1px solid #e1e1e1;
    position: fixed; /* Si querés que quede siempre arriba */
    top: 0;
    z-index: 99999;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 15px;
}

#top_r span.iso {
    height: 35px;
}

#top_r span.iso img {
    height: 100%;
    border: 0;
}

/* Botón de Menú */
.ver-menu {
    display: block;
}

.ver-menu a span {
    display: inline-block;
    height: 30px;
    text-indent: -9999px;
    width: 30px;
    background-size: contain;
}

.ver-menu .abrir span { background: url("gif/open-menu.png") no-repeat center; }
.ver-menu .cerrar span { background: url("gif/close-menu.png") no-repeat center; }

/* Menú Desplegable */
.menu-navegacion {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #fff;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#desplegar:target .menu-navegacion {
    height: auto;
    padding: 20px 0;
}

/* Listas del menú */
ul.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

ul.nav-links li {
    display: inline-block;
}

ul.nav-links a {
    font-size: 8.5pt;
    color: #333;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
}

ul.nav-links a:hover { color: #fe6e00; }

/* Estilos especiales */
.altaus a { color: blue !important; font-weight: bold; }

/* Control de botones Abrir/Cerrar */
.cerrar { display: none; }
#desplegar:target .abrir { display: none; }
#desplegar:target .cerrar { display: block; }
/* ==========================================
   ultimo momento
   ========================================== */
.contenedor-um {
        display: flex;
        flex-wrap: wrap; /* Permite que los bloques "caigan" si no entran */
        gap: 2%;
        width:100%;
        margin:60px 0;
    }
    #bloque-a{width: 78%;min-width: 650px;}
    #bloque-b {width: 20%;}
 /* Contenedor Principal */
.contenedor-ofertas-grid {
    display: grid;
    /* Cambiamos minmax para que no sea tan rígido */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
    width: 100%; /* Aseguramos que no se pase del padre */
    box-sizing: border-box;
}

/* La Card - Estilo base (No hace falta repetirlo en las media queries) */
.card-ultimo-momento {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%; /* Que ocupe el ancho de su celda de grid */
}

.card-ultimo-momento:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Imagen con filtro suave */
.card-headerum {
    height: 200px;
    overflow: hidden;
}

.img-principal {
    width: 100%;max-width:480px;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-ultimo-momento:hover .img-principal {
    transform: scale(1.05); /* Efecto de zoom suave */
}

/* Contenido */
.card-content {
    padding: 24px;
}

.cliente-titulo a {
    font-family: 'Montserrat', sans-serif; /* O la que uses */
    font-weight: 600;
    font-size: 1.2rem;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: -0.5px;
}

/* Precios estilo "Píldora" */
.precios-grid {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    gap: 10px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch; /* Suavidad en iPhone */
}

/* Ocultar la barra de scroll para que se vea más limpio (opcional) */
.precios-grid::-webkit-scrollbar {
    display: none;
}

.precio-item {
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    padding: 10px 14px;
    border-radius: 12px;
    min-width: 85px;
}

.precio-actual {
    color: #27ae60; /* Un verde más elegante */
    font-size: 1.1rem;
    font-weight: 700;
}
.servicios-mini img{width:24px;height:24px}
/* Botones minimalistas */
.card-footerum {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-detalles {
    background: #1a1a1a; /* Negro minimalista */
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    flex: 2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-whatsapp {
    background: #e8f5e9; /* Fondo verde muy clarito */
    color: #2e7d32;
    padding: 12px;
    border-radius: 10px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
    .wahm{display:none}
/* --- AJUSTE PARA TABLETS (1024px) --- */
@media (max-width: 1024px) {
    #bloque-a, #bloque-b {
        width: 100% !important; 
        min-width: 0 !important; /* ¡ESTO ES CLAVE para que no se estire! */
        max-width: 100%;
    }
    .contenedor-um { gap: 0; } /* Evitamos espacios laterales extra */
}

/* --- AJUSTE PARA MÓVILES (768px para abajo) --- */
@media (max-width: 768px) {


    .card-content {
        padding: 20px; /* Un poco más de aire que 15px */
    }

    /* Ajustamos la altura de la imagen en móviles para que no quede gigante */
    .card-headerum {
        height: 220px; 
    }
    .contenedor-ofertas-grid {
        display: grid;
        grid-template-columns: 1fr !important; /* Una sola columna real */
        width: 100%;
        gap: 20px;
    }
    
    .card-ultimo-momento {
        width: 100%;
        margin: 0;
    }
        .wahpc{display:none;}
    .wahm{display:block}
}

/* ============================================================
   1. bloque B, redes sociales
   ============================================================ */
/*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}
/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 768px) {
	#banner_bottom {width:98%; height:60px;margin:0 1% 10px 1%;clear:both}
#banner_bottom img{height:auto;width:100%}
    #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 */
    }
}