.toCenter
{
    text-align: center;
}

.toLeft {
    text-align: left;
}

.toRight {
    text-align: right;
}

.toJustify {
    text-align: justify;
}

.al5 {
    width: 5%;
}

.al10 {
    width: 10%;
}

.al16 {
    width: 16.5%;
}

.al20 {
    width: 20%;
}

.al25 {
    width: 25%;
}

.al30 {
    width: 30%;
}

.al33 {
    width: 33%;
}

.al50 {
    width: 50%;
}

.al60 {
    width: 60%;
}

.al66 {
    width: 66%;
}

.al70 {
    width: 70%;
}

.al80 {
    width: 80%;
}

.al90{
    width: 90%;
}

.al100 {
    width: 100%;
}

.heal90 {
    height: 90%;
}

.heal50 {
    height: 50%;
}

.heal100 {
    height: 100%;
}


.divTable{
    display: table;
}

.divRow{
    display: table-row;
}

.divCell {
    display: table-cell;
}

.pad5{
    padding: 5px 5px 5px 5px;
}

.padLeft5 {
    padding-left: 5px;
}

.padLeft10 {
    padding-left: 10px;
}

.padLeft15 {
    padding-left: 15px;
}

.padRight5 {
    padding-right: 5px;
}

.padTop5 {
    padding-top: 5px;
}

.padTop15{
    padding-top:15px;
}

.padBottom5 {
        padding-bottom: 5px;
}

.padBottom10 
{
    padding-bottom: 10px;
}

.padBottom15 {
    padding-bottom: 15px;
}

.imgPet{
    width: 100%;
    max-width: 32px;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    border: 1px solid #c5c5c5;
    padding: 4px 6px;
    color: #323232;
    margin: 0;
    min-height: 30px;
    line-height: 20px;
    background-color: #ffffff;
    outline: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow: inset 0px 1px 3px rgba(128, 128, 128, 0.1);
    -moz-box-shadow: inset 0px 1px 3px rgba(128, 128, 128, 0.1);
    box-shadow: inset 0px 1px 3px rgba(128, 128, 128, 0.1);
}

.borderGlowBlue {
    border: 2px solid #dadada;
    border-radius: 7px;
}

    .borderGlowBlue:focus {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0 0 10px #9ecaed;
    }

.GlowError {
    outline: none;
    border-color: #F92C2C;
    box-shadow: 0 0 10px red;
}

    .GlowError: focusout {
        outline: none;
        border-color: #F92C2C;
        box-shadow: 0 0 10px red;
        background-color: #FDFFE4;
    }

.btnEnviar {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #275e98;
    border-radius: 8px;
    background: #4ab0ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#4ab0ff), to(#275e98));
    background: -moz-linear-gradient(top, #4ab0ff, #275e98);
    background: linear-gradient(to bottom, #4ab0ff, #275e98);
    -webkit-box-shadow: #59d3ff 0px 0px 40px 0px;
    -moz-box-shadow: #59d3ff 0px 0px 40px 0px;
    box-shadow: #59d3ff 0px 0px 40px 0px;
    text-shadow: #17375a 1px 1px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}

    .btnEnviar:hover,
    .btnEnviar:focus {
        border: 1px solid #2e6eb3;
        background: #59d3ff;
        background: -webkit-gradient(linear, left top, left bottom, from(#59d3ff), to(#2f71b6));
        background: -moz-linear-gradient(top, #59d3ff, #2f71b6);
        background: linear-gradient(to bottom, #59d3ff, #2f71b6);
        color: #ffffff;
        text-decoration: none;
    }

    .btnEnviar:active {
        background: #275e98;
        background: -webkit-gradient(linear, left top, left bottom, from(#275e98), to(#275e98));
        background: -moz-linear-gradient(top, #275e98, #275e98);
        background: linear-gradient(to bottom, #275e98, #275e98);
    }

.divPlecaTit{
    color: white;
    background-color:forestgreen;
    border-radius: 5px 5px 0px 0px;
    height: 32px;
    vertical-align:middle;
}

.hal20 {
    height: 20%;
}

.listBene {
    list-style-image: url("../images/perrito16.png");
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.vAlignTop{
    vertical-align:top;
}

.tBlue {
    color: #0058a2;
}

.logoHeader{
    width: 100%;
    max-width:200px;
}

.fForm{
    font-size: 26px;
}

.negrita{
    font-weight:bold;
}

.logoContacto{
    width: 100%;
    max-width: 24px;
}

.btnLimpiar {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #1e7e34; /* Borde verde oscuro (reemplazo del borde azul) */
    border-radius: 8px;
    background: #28a745; /* Fondo verde (reemplazo del fondo azul) */
    background: -webkit-gradient(linear, left top, left bottom, from(#28a745), to(#1e7e34)); /* Degradado verde */
    background: -moz-linear-gradient(top, #28a745, #1e7e34); /* Degradado verde */
    background: linear-gradient(to bottom, #28a745, #1e7e34); /* Degradado verde */
    -webkit-box-shadow: #5cb85c 0px 0px 40px 0px; /* Sombra verde claro (reemplazo de la sombra azul) */
    -moz-box-shadow: #5cb85c 0px 0px 40px 0px;
    box-shadow: #5cb85c 0px 0px 40px 0px;
    text-shadow: #17375a 1px 1px 1px; /* Sombra de texto azul (se mantiene) */
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}

    .btnLimpiar:hover,
    .btnLimpiar:focus {
        border: 1px solid #218838; /* Borde verde más claro al pasar el ratón */
        background: #5cb85c; /* Fondo verde más claro al pasar el ratón */
        background: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#248f3f)); /* Degradado verde claro */
        background: -moz-linear-gradient(top, #5cb85c, #248f3f); /* Degradado verde claro */
        background: linear-gradient(to bottom, #5cb85c, #248f3f); /* Degradado verde claro */
        color: #ffffff;
        text-decoration: none;
    }

    .btnLimpiar:active {
        background: #1e7e34; /* Fondo verde oscuro al hacer clic */
        background: -webkit-gradient(linear, left top, left bottom, from(#1e7e34), to(#1e7e34));
        background: -moz-linear-gradient(top, #1e7e34, #1e7e34);
        background: linear-gradient(to bottom, #1e7e34, #1e7e34);
    }
.centered-image {
    display: block; /* Convierte la imagen en un elemento de bloque para poder aplicar márgenes automáticos */
    margin-left: auto;
    margin-right: auto;
}

.container-inferior {
    margin-top: -7%; /* Ajusta este valor según la altura del "overflow" deseado */
    position: relative; /* Necesario para el z-index si fuera necesario */
}

.row-inferior {
    display: flex; /* Usamos flexbox para controlar la disposición horizontal de las celdas */
    justify-content: space-around; /* Distribuye las celdas con espacio entre ellas */
    align-items: flex-start; /* Alinea las celdas en la parte superior */
}

.divCell {
    /* Mantén tus estilos existentes para el ancho y centrado */
}

.imagen-circular {
    /* Mantén tus estilos existentes para el ancho y el border-radius */
    display: block; /* Asegura que la imagen ocupe todo el ancho de su contenedor para el centrado */
    margin: 0 auto; /* Centra la imagen dentro de su divCell */
}

.hide {
    display: none; /* Oculta el elemento completamente */
}

body.theme-default {
    background-color: #f0f0f0; /* Un gris claro neutro */
    color: #333333; /* Color de texto general */
    font-family: Arial, sans-serif; /* Fuente por defecto */
    margin: 0;
    padding: 0;
    /* Asegura que el fondo cubra toda la ventana, incluso si no hay una imagen */
    background-image: none;
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: scroll;
}

/* --- Tema para "Stream" (body.theme-1) --- */
/* Se activa cuando la URL tiene ?tema=1 */
body.theme-1 {
    /* Fondo de imagen */
    background-image: url('../images/strm_background.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Mantiene la imagen fija al desplazarse */
    /* Color de respaldo si la imagen no carga o para áreas transparentes */
    background-color: #2c3e50; /* Un azul oscuro, tipo medianoche */
    /* Colores de texto y elementos para contrastar con este fondo */
    color: #ecf0f1; /* Gris muy claro, casi blanco */
    /* Puedes añadir más estilos específicos del tema aquí, por ejemplo: */
    /* h1, h2, h3 { color: #3498db; } */ /* Un azul vibrante */
    /* a { color: #f1c40f; } */ /* Un amarillo dorado */
}

/* --- Tema para "Caja" (body.theme-2) --- */
/* Se activa cuando la URL tiene ?tema=2 */
body.theme-2 {
    /* Fondo de imagen */
    background-image: url('../images/caja_background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Color de respaldo */
    background-color: #e67e22; /* Un naranja cálido, tipo óxido */
    /* Colores de texto y elementos para contrastar */
    color: #ffffff; /* Blanco puro */
    /* Más estilos específicos del tema: */
    /* h1, h2, h3 { color: #d35400; } */ /* Un naranja más oscuro */
    /* a { color: #f39c12; } */ /* Un naranja más brillante */
}

.tcNegro {
    color: black;
}

.tcBlanco {
    color: white;
}


.divHeader {
    background-color: rgba(0, 82, 161, 0.8);
}

/* Gojali Regular */
@font-face {
    font-family: "Gojali";
    src: url("../fonts/gojali/Gojali-Regular.ttf") format("truetype");
    font-weight: 400; /* Peso para Regular */
    font-style: normal;
    font-display: swap;
}

/* Gojali Bold (Negritas) */
@font-face {
    font-family: "Gojali";
    src: url("../fonts/gojali/Gojali-Bold.ttf") format("truetype");
    font-weight: 700; /* Peso para Bold (negritas) */
    font-style: normal;
    font-display: swap;
}

/* Gojali Medium */
@font-face {
    font-family: "Gojali";
    src: url("../fonts/gojali/Gojali-Medium.ttf") format("truetype");
    font-weight: 500; /* Peso para Medium (normalmente entre regular y bold) */
    font-style: normal;
    font-display: swap;
}

/* Gojali Heavy */
@font-face {
    font-family: "Gojali";
    src: url("../fonts/gojali/Gojali-Heavy.ttf") format("truetype");
    font-weight: 900; /* Peso para Heavy (muy negritas, black) */
    font-style: normal;
    font-display: swap;
}

/* Gojali Thin (Delgada) */
@font-face {
    font-family: "Gojali";
    src: url("../fonts/gojali/Gojali-Thin.ttf") format("truetype");
    font-weight: 100; /* Peso para Thin (muy delgada) */
    font-style: normal;
    font-display: swap;
}

/* Clase base para usar Gojali */
.fGojali {
    font-family: "Gojali", sans-serif;
}

/* Clases para los diferentes pesos */
.fGojali-thin {
    font-family: "Gojali", sans-serif; /* Repite la font-family, aunque no es estrictamente necesario */
    font-weight: 100;
}

.fGojali-regular {
    font-family: "Gojali", sans-serif;
    font-weight: 400;
}

.fGojali-medium {
    font-family: "Gojali", sans-serif;
    font-weight: 500;
}

.fGojali-bold {
    font-family: "Gojali", sans-serif;
    font-weight: 700;
}

.fGojali-heavy {
    font-family: "Gojali", sans-serif;
    font-weight: 900;
}

.brickTexture {
    background-color: #f2f2f2; 
    background-image: linear-gradient(335deg, #e8e8e8 23px, transparent 23px), /* Gris apenas más oscuro */
    linear-gradient(155deg, #d8d8d8 23px, transparent 23px), /* Otro tono de gris sutil */
    linear-gradient(335deg, #e8e8e8 23px, transparent 23px), linear-gradient(155deg, #d8d8d8 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

.curPointer {
    cursor: pointer;
}

.vwPad1 {
    padding: 1vw;
}

.btnServ {
    /* **RESPONSIVIDAD DEL BOTÓN:** */
    width: 100%; /* El botón ocupa el 100% del ancho disponible en su celda (td.al50) */
    /* **Mantiene el botón cuadrado de forma responsiva:** */
    aspect-ratio: 1 / 1; /* Esto asegura que el alto del botón sea igual a su ancho */
    /* **¡NUEVOS LÍMITES MÁXIMOS: 80PX!** */
    max-width: 80px; /* El botón no crecerá más de 80px de ancho */
    max-height: 80px; /* El botón no crecerá más de 80px de alto (debido a aspect-ratio) */
    /* Límites mínimos (para que no sean muy pequeños en móviles) */
    min-width: 50px; /* He ajustado el mínimo también para que escale mejor con el nuevo máximo */
    min-height: 50px; /* Mantiene la proporción con min-width */
    /* **CENTRADO DE LA IMAGEN DENTRO DEL BOTÓN (¡Esto es clave!)** */
    display: flex; /* 1. Convierte el botón en un contenedor Flexbox */
    justify-content: center; /* 2. Centra el contenido (la imagen) HORIZONTALMENTE */
    align-items: center; /* 3. Centra el contenido (la imagen) VERTICALMENTE */
    /* **CENTRADO DEL BOTÓN DENTRO DE SU CELDA** */
    margin: 0 auto; /* Centra el botón horizontalmente dentro de la celda si el botón es más pequeño que el 100% del ancho de la celda */
    /* Estilos visuales del botón */
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 0; /* Asegúrate de que no haya padding extra que mueva la imagen */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.icono-servicio-img {
    display: block; /* Elimina cualquier espacio adicional que el navegador pueda añadir */
}

/* Efectos al pasar el puntero sobre el botón */
.btn-icono-servicio:hover {
    background-color: rgba(136, 180, 80, 0.1);
    border-color: #88b450;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.iframeal100 { 
    width: 100%; 
    height: 100%; 
    border: none;
}

.flex1 {
    min-height: 100vh;
}

.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Espacio superior */
}

    .policy-table th,
    .policy-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        vertical-align: top; /* Para alinear el contenido de las celdas arriba */
    }

    .policy-table th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

/* Opcional: Estilo para los enlaces */
.fordownload {
    color: #007bff;
    text-decoration: none;
}

.fordownload:hover {
    text-decoration: underline;
}

.roundCorners5px {
    border-radius: 5px 5px 5px 5px;
}

.roundCorners8px {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}