:root{
--tablas-letra: #fff;
  /* Tabla 1 */
--tabla1-titulo: #B481D3;
--tabla1-encabezado: #39025A;
--tabla1-detalle: #804BA1;
  /* Tabla 2 */
--tabla2-titulo: #81B3D3;
--tabla2-encabezado: #022D5A;
--tabla2-detalle: #4B72A1;
  /* Tabla 3 */
--tabla3-titulo: #D381C3;
--tabla3-encabezado: #5A0246;
--tabla3-detalle: #A14B8C;
}

/* General */
.esconderText {
  visibility: hidden;
}

.snip1404 {  
  color: var(--tablas-letra); /* color de las letras del detalle */  
  font-size: 16px;
  width: 100%;
}
.snip1404 .plan-titleHeader {  
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;  
}
.snip1404 .planHeader:first-of-type {
  border-radius: 8px 8px 8px 8px;
}
.snip1404 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
/* detalle de cada tabla */
.snip1404 .plan-features {
  padding: 20px 0 20px;
  margin: 0;
  list-style: outside none none;
}
.snip1404 .plan-features li {
  padding: 8px 5%;
}
.snip1404 .plan-features i {
  margin-right: 8px;
  color: var(--tablas-letra); /*le da color a los vistos buenos del detalle */
}
/* titulo donde sale cantidad personas */
.snip1404 .plan-title {  
  text-align: center; 
  text-transform: uppercase;
  letter-spacing: 4px;
  font-family: Arial;
}


/* Tabla 1 */
.snip1404 .planHeader {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tabla1-encabezado);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla1-titulo);
}
.snip1404 .plan {
  margin: 0;
  width: 25%;
  position: relative;
  float: left; /*para que aparezcan una al lado de otra */
  overflow: hidden;
  border: 3px solid var(--tabla1-encabezado);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla1-detalle);
}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.snip1404 .plan header{
  background-color: var(--tabla1-encabezado);
}
.snip1404 .plan:first-of-type {
  border-radius: 8px 0 0 8px;
}
.snip1404 .plan:last-of-type {
  border-radius: 0 8px 8px 0;
}
.snip1404 .plan-title { 
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-family: Arial;
}

.plan-select a{
  color: var(--tablas-letra);
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  background-color: var(--tabla1-titulo);
}

.plan-select a:hover{
  background-color: var(--tabla1-encabezado);
}

/*
.snip1404 .plan-select {
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: center;
  background-color: var(--tabla1-titulo);
}
.snip1404 .plan-select a{
  color: var(--tablas-letra);
}
.snip1404 .plan-select:hover{
  background-color: var(--tabla1-encabezado);
}
*/

/* -------------------------
  ----------------------- */
/* INICIO DISENO TABLA 2 */
.snip1404 .planHeader2 {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tabla2-encabezado); /*color borde del titulo */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla2-titulo);
}
/* detalles en las tablas */
.snip1404 .plan2 {
  margin: 0;
  width: 25%;
  position: relative;
  float: left;
  overflow: hidden;
  border: 3px solid var(--tabla2-encabezado); /* color bordes del detalle */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla2-detalle); 
}
/* bordes titulo table 2 */
.snip1404 .planHeader2:first-of-type {
  border-radius: 8px 0 0 8px;
}
.snip1404 .plan2 header{
  background-color: var(--tabla2-encabezado);
}
/* esto le da los bordes circulares al 1ro y al ultimo de la tabla */
.snip1404 .plan2:first-of-type {
  border-radius: 8px 0 0 8px;
}
.snip1404 .plan2:last-of-type {
  border-radius: 0 8px 8px 0;
}

.plan-select2 a{
  color: var(--tablas-letra);
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  padding: 20px 100px;
  text-align: center;
  background-color: var(--tabla2-titulo);
}

.plan-select2 a:hover{
  background-color: var(--tabla2-encabezado);
}

/* -------------------------
  ----------------------- */
/* INICIO DISEño TABLA 3 */
.snip1404 .planHeader3 {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tabla3-encabezado);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla3-titulo);
}
.snip1404 .planHeader3:first-of-type {
  border-radius: 8px 8px 8px 8px;
}
/* detalles en las tablas */
.snip1404 .plan3 {
  margin: 0;
  width: 25%;
  position: relative;
  float: left;
  overflow: hidden;
  border: 3px solid var(--tabla3-encabezado);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: var(--tabla3-detalle); 
}
.snip1404 .plan3 header{
  background-color: var(--tabla3-encabezado);
}
/* esto le da los bordes circulares al 1ro y al ultimo de la tabla */
.snip1404 .plan3:first-of-type {
  border-radius: 8px 0 0 8px;
}
.snip1404 .plan3:last-of-type {
  border-radius: 0 8px 8px 0;
}

.plan-select3 a{
  color: var(--tablas-letra);
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  padding: 20px 100px;
  text-align: center;
  background-color: var(--tabla3-titulo);
}

.plan-select3 a:hover{
  background-color: var(--tabla3-encabezado);
}



/* de aqui para arriba */
@media only screen and (min-width: 981px) {
  .plan-select a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
  .plan-select2 a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
  .plan-select3 a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
}

/* de aqui para abajo....*/
@media only screen and (max-width: 980px) {
  .snip1404 .plan {
    width: 50%;
  }
  .snip1404 .plan2 {
    width: 50%;
  }
  .snip1404 .plan3 {
    width: 50%;
  }
  .plan-select a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
  .plan-select2 a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
  .plan-select3 a{  
    display: flex;
    justify-content: center;
    padding: 15px;
  }
}

/* de aqui para abajo.... */
@media only screen and (max-width: 480px) {
  .snip1404 .plan {
    width: 100%;
  }
  .snip1404 .plan2 {
    width: 100%;
  }
  .snip1404 .plan3 {
    width: 100%;
  }
}
/*
@media only screen and (max-width: 425px) {  
  .plan-select a{    
    padding: 20px 150px;
  }
}

@media only screen and (max-width: 375px) {  
  .plan-select a{    
    padding: 20px 125px;
  }
}

@media only screen and (max-width: 320px) {  
  .plan-select a{    
    padding: 20px 100px;
  }
}
*/