@charset "utf-8";
/* ==========================================================================
   IMPORTACIÓN DE GOOGLE FONTS (Montserrat Variable)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

/* Tu clase base de utilidad */
.montserrat-ada {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* ==========================================================================
   CONFIGURACIÓN TIPOGRÁFICA GLOBAL (Texto base en negro)
   ========================================================================== */
body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;          
    font-size: 12px;
    color: #000000;
    -webkit-font-smoothing: antialiased;
    padding: 0;
	line-height: 1.4;
}

/* ==========================================================================
   ENCABEZADOS Y TÍTULOS (En negro)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: #000000;            /* Todos los títulos en negro puro */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.2;
	margin-bottom: 6px;
}

h1 {
    font-size: 1.5rem;         
    font-weight: 650;          /* Peso Bold marcado */
    letter-spacing: -0.6px;    
}

h2 {
    font-size: 1.6rem;           
    font-weight: 700;          /* Peso Bold estándar */
}

h3 {
    font-size: 1rem;         
    font-weight: 700;          /* Peso Semi-Bold */
    letter-spacing: 0.5px;  
}

/* ==========================================================================
   CLASES DE TEXTO AUXILIARES (Subtítulos y tamaños)
   ========================================================================== */
.encabezado-3-blanco {
    font-size: 1rem;         
    font-weight: 700;          /* Peso Semi-Bold */
    letter-spacing: 1px; 
    color: #ffffff !important; /* Forzado a blanco para el fondo lila */
}

.subtitulo-hero {
    font-size: 1.1rem;
    font-weight: 300;          /* Peso Light, estilizado */
    color: #000000;
}

.texto-pequeno {
    font-size: 0.85rem;
    font-weight: 400;
    color: #555555;            /* Un gris oscuro solo para textos legales/secundarios */
}
.tachado-pequeño {
		font-size: 0.85rem;
		text-decoration: line-through;
		color: #a0a0a0;
}
.tachado-grande {
		font-size: 1.3rem; 
		text-decoration: line-through;
		color: #a0a0a0;
}
/* 1. El contenedor padre (Lila) >>>>*/ 
.contenedor-lila {
    background-color: #fcf0fa;   /* El lila clarito de fondo de tu imagen */
    border-radius: 0 30px 30px 0; /* Bordes redondeados solo a la derecha */
    padding: 0px 0px;          /* Espaciado interno */
    
}
/* 2. El contenedor hijo (Blanco) que se ve más grande >>>> */
.contenedor-blanco {
    background-color: #ffffff;
    border: 2.5px solid #7d376a;   /* El borde morado oscuro de tu foto */
    border-radius: 30px;         /* Bordes muy redondeados */
    padding: 30px;               /* Relleno para que respire el texto interior */
    
    /* EL TRUCO: Márgenes negativos para que "escupe" hacia afuera del lila */
    margin-top: -55px;           
    margin-bottom: -55px;
}
/* Contenedor general transparente para Planes */
.fondoplanes {
    width: 100%;
    height: auto;
    margin: 0 auto; 
	border-collapse: separate !important;   /* OBLIGATORIO para que el border-radius funcione en celdas <td> */
    border-spacing: 15px 0px !important;    /* Esto controla la separación horizontal entre tarjeta y tarjeta */
}
/* Estilos de tarjetas individuales para Escritorio */
.tarjeta-blanca {
    background-image: none !important;        /* Eliminamos la imagen antigua del megáfono/fondo */
    background-color: #ffffff !important;      /* Fondo blanco limpio */
    border: 2.5px solid #7d376a !important;    /* Tu violeta corporativo */
    border-radius: 28px !important;            /* Curvatura idéntica a tu diseño original */
    padding: 12px !important;             /* Espaciado interno para que respire el texto */
    box-sizing: border-box !important;
}
/* Tarjeta Lila (Solicita una demostración) */
.tarjeta-lila {
    background-image: none !important;        /* Eliminamos la imagen antigua */
    background-color: #7d376a !important;      /* Fondo violeta sólido */
    border: 2.5px solid #7d376a !important;    /* Mismo grosor para que midan exactamente lo mismo de alto */
    border-radius: 28px !important;            /* Mismo redondeado de esquinas */
    padding: 13px !important;
    box-sizing: border-box !important;
}
.botones-planes {
    background-color: #fcf0fa;   /* El fondo blanco puro */
    border-radius: 5px;         /* ¡Aquí está la magia! Cambia el número para más o menos redondeado */
    padding: 5px;               /* El espacio de "respiro" para que el texto no pegue en los bordes */
    max-width: 950px;            /* Para que no se estire demasiado en pantallas gigantes */
}
.boton-planes {
    background-color: #ffedd8;   /* El fondo blanco puro */
    border-radius: 8px;         /* ¡Aquí está la magia! Cambia el número para más o menos redondeado */
    padding: 3px;               /* El espacio de "respiro" para que el texto no pegue en los bordes */
    max-width: 800px;            /* Para que no se estire demasiado en pantallas gigantes */
	font-size: 1rem;         
    font-weight: 700;          /* Peso Semi-Bold */
    letter-spacing: 0.5px;
}
.tablascentradas {
    width: 80%;
    margin: 0 auto; 
}
.lineas {
    border: none;
    height: 2px;                  /* Grosor de 2 píxeles */
    background-color: #7d376a;    /* Color violeta */
    margin: 3px auto;            /* Espaciado para que respiren los textos de arriba y abajo */
}
.linea-blanca {
    border: none;
    height: 2px;                  /* Grosor de 2 píxeles */
    background-color: #ffffff;    /* Color violeta */
    margin: 6px auto;            /* Espaciado para que respiren los textos de arriba y abajo */
}
.linea-vertical {
    border: none;
    width: 2px;                  /* Ahora el ancho determina el grosor */
    height: 40px;                /* Necesita una altura fija (ajústala a tu gusto) */
    background-color: #7d376a;    /* Tu color violeta */
    display: inline-block;       /* Permite que se coloque al lado de textos o elementos */
    margin: 0 12px;              /* Espaciado a la izquierda y derecha para que respire */
    vertical-align: middle;      /* Centra la línea verticalmente respecto al texto vecino */
}
.txt-violeta {
    color: #7d376a !important; /* Violeta corporativo */
}
.txt-blanco {
    color: #ffffff !important; /* Blanco */
}
.enlace-violeta {
    color: #7d376a;             /* Color blanco */
    text-decoration: none;      /* Quita el subrayado por defecto */
}
/* Es una buena práctica añadir el estado 'hover' para cuando pasen el ratón por encima */
.enlace-violeta:hover {
    color: #7d376a;             /* Se vuelve un lila clarito al pasar el ratón */
    text-decoration: underline; /* Opcional: vuelve a aparecer el subrayado solo al pasar el ratón */
}
.enlace-blanco {
    color: #ffffff;             /* Color blanco */
    text-decoration: none;      /* Quita el subrayado por defecto */
}
.enlace-blanco:hover {
    color: #ffffff;             /* Se vuelve un lila clarito al pasar el ratón */
    text-decoration: underline; /* Opcional: vuelve a aparecer el subrayado solo al pasar el ratón */
}
p {
    margin-top: 0;       
    margin-bottom: 5px; 
    line-height: 1.4;
}

h1, h2, h3 {
    margin-top: 0;       
    margin-bottom: 0px; 
}

.texto-destacado-violeta {
    font-size: 1.1rem;
    font-weight: 600;          
    color: #7d376a;     
}

/* ==========================================================================
  ADAPTACIÓN QUIRÚRGICA PARA MÓVILES (Media Query)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    table[width="81%"], .tablascentradas, .fondolila {
        width: 92% !important;
        margin: 0 auto !important;
    }

    /* --- BLOQUE 1: Cabecera / Hero --- */
    body > table[width="81%"] > tbody > tr {
        display: block !important;
    }
    body > table[width="81%"] > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    table[width="90%"] td {
        padding: 5px 2px !important;
        font-size: 12px !important;
    }

    /* --- BLOQUE 2: Franja Lila (Dolores) --- */
    .fondolila {
        height: auto !important;
        padding: 30px 15px !important;
        background-size: cover !important;
    }
    .fondolila > tbody > tr > td > table > tbody > tr {
        display: block !important;
    }
    .fondolila > tbody > tr > td > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .fondolila table table table td {
        font-size: 10px !important;
        padding: 2px !important;
    }
    img[src*="linea.png"] {
        width: 80% !important;
        height: auto !important;
        margin: 15px auto !important;
        display: block;
    }

    /* --- BLOQUE 3: ¿Qué es ADA? --- */
    .tablascentradas > tbody > tr {
        display: block !important;
    }
    .tablascentradas > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
    .tablascentradas > tbody > tr > td[width="700"] {
        text-align: center !important;
        width: 100% !important;
        margin-top: 20px;
    }
    .tablascentradas table table td[width="60"] {
        display: table-cell !important;
        width: 60px !important;
    }

    /* --- BLOQUE 4: Tarifas / Planes (Apilado Vertical) --- */
    .fondoplanes {
        height: auto !important;
        padding: 20px 0 !important;
    }
    .fondoplanes > tbody > tr > td > table > tbody > tr {
        display: block !important;
    }
    .fondoplanes > tbody > tr > td > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 25px; /* Separación limpia entre tarjetas en móvil */
        text-align: center !important;
        background-size: cover !important; 
        border-radius: 8px; 
    }
    .fondoplanes > tbody > tr > td > table > tbody > tr > td:last-child {
        margin-bottom: 0;
    }

    h2 { font-size: 1.5rem !important; }
    h3, .encabezado-3-blanco { font-size: 1.2rem !important; }