/* Estilos que se deben colocar en el CSS personalizado ========================================= ** El color de fondo de la pàgina */ *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } :root{ --spacePad:20px !important; --spaceMarg:20px; --spaceMargTitulo:40px; --padding: var(--spacePad); /* Padding de las cajas y columnas */ --paddingTB: calc(var(--spacePad) * 3) 0 calc(var(--spacePad) * 3) 0; /* Padding sólo Top y Bottom para los contenedores principales de las secciones */ --paddingTb5: 5px var(--spacePad) 5px var(--spacePad); --spaceEntreSection: calc(var(--spaceMarg) * 2); --t2size: 2.6rem; /* tamaño de titulo 2 */ --t3size: 2.1rem; /* tamaño de titulo 3 */ --spaceDespuesT1:30px; --spaceDespuesT1b:20px; --spaceAntesSubt: 25px; --spaceDespuesP: 10px; --spaceDespuesSubt: 15px; --spaceMin: 5px; --maxAnchoBox1200:1200px; --maxAnchoBox:1300px; --bold: 600; --btnRadius: 12px; } body{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-size: var(--fontSize); font-family: var(--fontTxt); font-style: normal; font-weight: 400; line-height: var(--interlineado); color: var(--colorG4); overflow-x: hidden; /* Hide horizontal scrollbar */ } input, textarea, select, button { font-size: 1.2rem; /* Hace que hereden el tamaño del */ font-family: inherit; /* Hereda la fuente del */ } .fontSizeMin{ font-size: var(--fontSize); line-height: var(--fontSizeInterlineaMin); } .fontSizeMax{ font-size: var(--fontSize); line-height: var(--fontSizeInterlineaMax); } p{ text-align: left; line-height: clamp(var(--fontSizeInterlineaMin), var(--fontSizeInterlineaFluid), var(--fontSizeInterlineaMax)); } ul{ margin: 0; padding: 0; list-style: none; } /* Los tamaños de los H1... H6 son determinados por la clase .T1..T6 */ h1, h2, h3, h4, h5, h6{ font-family: var(--fontTitulos); font-weight: var(--fontTitulosWeight); font-style:normal; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* ======================== Contenedores principales ======================== Tienen las mismas características. ----------------------- .containerTop1 => Siempre irá en la parte superior. Puede tener cualquier color de fondo. ----------------------- .containerFnd1, .containerFnd2, .containerFnd3, .containerFnd4, .containerBlanco => Color de fondo, padding top y bottom: 60px ----------------------- .container, .containerCero => Sin color de fondo, padding:0 ----------------------- .containerF1, .containerF2, .containerF3, .containerF4 => Sin color de fondo, padding top y bottom:20px ----------------------- .containerFblanco, .containerFg2 => Con color de fondo, padding:20px ----------------------- */ .container, .containerCero, .containerFnd1, .containerFnd2, .containerFnd3, .containerFnd4, .containerBlanco, .containerTop1, .containerF1, .containerF2, .containerF3, .containerF4, .containerFblanco, .containerFg2{ width: 100vw; height: auto; display: flex; flex-wrap: wrap; margin: 0; } .container, .containerCero, .containerFnd1, .containerFnd2, .containerFnd3, .containerFnd4, .containerBlanco, .containerF1, .containerF2, .containerF3, .containerF4, .containerFblanco, .containerFg2 { flex-direction: column; align-items: center; justify-content: flex-start; } .containerTop1{ flex-direction: row; justify-content: center; padding-top: 4px; padding-bottom: 4px; } .containerF1, .containerF2, .containerF3, .containerF4, .containerFblanco, .containerFg2{ padding-top: var(--spacePad); padding-bottom: var(--spacePad); } .container, .containerCero{ padding: 0; } .containerFnd1, .containerFnd2, .containerFnd3, .containerFnd4, .containerBlanco { padding: var(--paddingTB); } .containerFblanco{ background-color: white; color: var(--colorG4); } .containerFg2{ background-color:var(--colorG2); color: var(--colorG4); } .containerFnd1{ background-color: var(--color1); color: white; } .containerFnd2{ background-color: var(--color2); color: white; } .containerFnd3{ background-color: var(--color3); color: white; } .containerFnd4{ background-color: var(--color4); color: var(--color1); } .containerBlanco{ background-color: white; color: var(--colorG4); } /* ======================== Fin de contenedores principales ========================*/ /* ======================== caja contenedora de los contenidos ======================== .boxBody=> Siempre irá dentro de los contenedores principales por ejemplo:

*/ .boxBody, .boxBodyC, .boxBodyJc, .boxBodyLeft, .boxBodyRowC{ display: flex; flex-wrap: wrap; width: 96vw; height: auto; margin: 0; } .boxBody, .boxBodyC { flex-direction: column; align-items: center; justify-content:flex-start; } .boxBodyJc, .boxBodyLeft { flex-direction: row; } .boxBodyJc{ justify-content: space-between; } .boxBodyLeft{ justify-content: flex-start; } .boxBodyRowC{ flex-direction: row; justify-content:center; } /* Cajas internas al 100% ======================== .box, .boxR=> Siempre irá dentro de las cajas contenedora de los contenidos, de las columnas. por ejemplo:

*/ .boxR{ /* boxR = Flexx row */ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: auto; padding: 0; margin: 0; } .boxC{ /* boxR = Flexx column*/ display: flex; flex-direction: column; justify-content:flex-start; width: 100%; height: auto; min-height: 50px; } .boxCentro{ /* boxR = Flexx column*/ display: flex; flex-direction:row; justify-content: center; width: 100%; padding: 0; margin: 0; } .boxCentro p{ text-align: center; margin-bottom: var(--spaceDespuesP); } /* Cajas para los títulos ======================== */ .boxT1, .boxT1b, .boxT2, .boxT3, .boxT4, .boxT2L, .boxT3L, .boxT4L{ width: 100%; height: auto; } .boxT1{ /* boxT1= caja del título */ margin-bottom: var(--spaceDespuesT1); text-align: center; } .boxT1b{ /* boxT1= caja del título */ margin-bottom: var(--spaceDespuesT1b); text-align: center; } .boxT2, .boxT2L{ /* boxT2= caja del título 2 */ margin-bottom: var(--spaceDespuesSubt); } .boxT3, .boxT3L{ /* boxT3= caja del título 3 */ margin-bottom: var(--spaceDespuesSubt); } .boxT4, .boxT4L{ /* boxT3= caja del título 3 */ margin-bottom: var(--spaceDespuesP); } .boxT2, .boxT3, .boxT4{ /* Alineación centrado */ text-align: center; } .boxT2L, .boxT3L, .boxT4L{ /* Alineación izquierda */ text-align: left; margin-bottom: var(--spaceDespuesSubt); } /* Cajas para los párrados ======================== */ .boxP, .boxPlast, .boxPcenter, .boxPcenterSinMB, .boxPantesSubti{ width: 100%; height: auto; } .boxP{ text-align: justify; margin-bottom: var(--spaceDespuesP); } .boxPlast{ text-align: justify; margin-bottom: 0; } .boxPcenterSinMB{ text-align: center; } .boxPcenter{ text-align: center; margin-bottom: var(--spaceDespuesP); } .boxPantesSubti{ text-align: justify; margin-bottom: var(--spaceAntesSubt); } /* Cajas para los párrados sin Width ======================== */ .boxPcenter{ text-align: center; margin-bottom: var(--spaceDespuesP); } /* Títulos ------------------------ */ .t1{ /* Titulo 1*/ font-size: clamp(var(--t1sizeMin), var(--t1sizeFluid), var(--t1sizeMax)); line-height: clamp(var(--t1InterlineaMin), var(--t1InterlineaFluid), var(--t1InterlineaMax)); } .t1R{ /* Titulo 1*/ font-size: var(--t1size); font-weight: normal; } .t2{ /* Titulo 2*/ font-size: clamp(var(--t2sizeMin), var(--t2sizeFluid), var(--t2sizeMax)); line-height: clamp(var(--t2InterlineaMin), var(--t2InterlineaFluid), var(--t2InterlineaMax)); } .t2R{ /* Titulo 2*/ font-size: var(--t2size); font-weight: normal; } .t3{ /* Titulo 3 sin top*/ font-size: clamp(var(--t3sizeMin), var(--t3sizeFluid), var(--t3sizeMax)); line-height: clamp(var(--t3InterlineaMin), var(--t3InterlineaFluid), var(--t3InterlineaMax)); } .t3R{ /* Titulo 3 sin top*/ font-size: var(--t3size); font-weight:normal; } .t3top{ /* Titulo 3 con top*/ font-size: var(--t3size); font-weight: bold; margin-top: var(--spaceAntesSubt); margin-bottom: var(--spaceDespuesSubt); } .t4{ /* Titulo 4*/ font-size: clamp(var(--t4sizeMin), var(--t4sizeFluid), var(--t4sizeMax)); line-height: clamp(var(--t4InterlineaMin), var(--t4InterlineaFluid), var(--t4InterlineaMax)); } .t1sizeMin{ font-size: var(--t1sizeMin); line-height: var(--t1InterlineaMin); } .t1sizeMax{ font-size: var(--t1sizeMax); line-height: var(--t1InterlineaMax); } .t2sizeMin{ font-size: var(--t2sizeMin); line-height: var(--t2InterlineaMin); } .t2sizeMax{ font-size: var(--t2sizeMax); line-height: var(--t2InterlineaMax); } .t3sizeMin{ font-size: var(--t3sizeMin); line-height: var(--t3InterlineaMin); } .t3sizeMax{ font-size: var(--t3sizeMax); line-height: var(--t3InterlineaMax); } .t4sizeMin{ font-size: var(--t4sizeMin); } .t4sizeMax{ font-size: var(--t4sizeMax); } .fontMini{ /* Titulo 2*/ font-size: 1.5rem; font-weight: normal; } /* Fondos con redondeos */ .fndR1{ padding: var(--padding); background-color: white; color: var(--colorG4); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* Fondo de color de cajas con bordes redondeados para títulos ======================== */ .fnd1Titulo, .fnd2Titulo, .fnd3Titulo, .fnd4Titulo{ display: inline-block; width: auto; height: auto; text-align: center; padding: 10px 20px 10px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fnd5Titulo{ display: inline-flex; padding: 6px 9px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: var(--colorG2); color: var(--colorG4); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fnd65Titulo{ display:inline-table; padding: 6px 20px 6px 20px; background-color: var(--color2); border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fnd7Titulo{ /* Fondo blanco*/ width: auto; height: auto; text-align: center; padding: 4px 10px 5px 10px; background-color: white; color: var(--color1); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_1{ background-color: var(--colorG1); border: 2px solid var(--colorG2); padding: var(--padding); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_2a{ background-color: var(--colorG2); border: 2px solid var(--colorG2); border-bottom: none; padding: var(--paddingTb5); border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_2b{ background-color: var(--colorG1); border: 2px solid var(--colorG2); padding: var(--padding); border-radius: 0 0px 10px 10px; -moz-border-radius: 0 0px 10px 10px; -webkit-border-radius: 0 0px 10px 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_3{ display: flex; flex-direction:row; justify-content: center; flex-wrap: wrap; height:auto; text-align: left; background-color: var(--colorG1); border: 2px solid var(--colorG2); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_4_whatsaap, .fndBox_5_fono{ display: flex; height:34px; padding:3px 2px 1px 30px; margin: 0 4px; text-align: left; font-family: var(--fontBtn); font-size: var(--fontBtnSize); font-weight: bold; font-style: italic; background-repeat: no-repeat; background-position:0 6px; text-decoration: none; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .fndBox_4_whatsaap{ background-image:url(../img/whatsAPP.png); } .fndBox_5_fono{ background-image:url(../img/tellamamos.png); } .fndBox_6{ background-color: var(--color1); color: white; padding: var(--padding); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fndBox_7{ background-color: white; color: var(--colorG4); padding: var(--padding); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* Cajas para los botones ======================== */ .boxBtn, .boxBtnSinP, .boxBtn2, .boxBtnRowCenter{ display: flex; width: 100%; height: auto; } .boxBtn, .boxBtnSinP, .boxBtnRow{ flex-direction: row; justify-content: center; flex-wrap: wrap; } .boxBtnRowCenter{ flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; } .boxBtnSinP{ padding-top: 0 ; } .boxBtn2{ flex-direction: column; align-items: center; } /* .boxBtn3 Y .boxBtn4 trabajan juntas.*/ .boxBtn3 { display: grid; grid-template-columns: repeat(1, 1fr); /* 2 columnas de igual tamaño */ grid-auto-rows: auto; /* Filas ajustables */ gap: 10px; /* Espacio entre filas y columnas */ width: max-content; /* Ancho depende del contenido */ justify-content: center; /* Centra el contenido */ align-items: center; } .boxBtn4 { display: grid; grid-auto-flow: column; /* Alinea en fila */ gap: 10px; /* Espacio entre cajas */ width: max-content; /* Ancho depende del contenido */ margin:0 auto; } /* Imàgenes de fondo ======================== */ .imgFnd1{ background-image:url(/../img/sitioswebresponsive.webp); background-repeat: no-repeat; background-position: center 0; } /* logo ======================== */ a.logo1{ display: flex; width: auto; height: auto; padding: 0; margin: 0; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } a.logo1 img{ width: auto; height: 30px; padding: 0; margin: 0; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } a.logo1:hover{ color:var(--colorB2); } .textP{/* Texto de párrados*/ text-align: justify; } /* Videos ======================== */ .iframePortada { /* video en la portada */ width: 100%; height: 360px; } .iframeBox iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } /* FIN iframe responsive */ /* imágenes */ .img100SM{ /* imagen sin margin bottom */ width: 100%; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .img100{ width: 100%; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* Footer ======================== */ .footer1{ width: 100%; text-align: center; color: var(--colorG4); } /* Desarrollado por ======================== */ .desarrolladopor{ padding-top:70px; } .desarrolladopor a{ display: flex; flex-direction: column; align-items: center; text-align: center; width:200px; text-decoration:none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .desarrolladopor a p{ text-align: center; font-size: var(--fontSizeMini); color: var(--colorG4); } .desarrolladopor a img{ width:70px; } .desarrolladopor a:hover{ color:#999; } /* Videos */ .video1{ /* Videos para la portada*/ width:100%; height:200px; margin:0 auto; padding:0; } .emojin2,.emojin3, .emojin4, .emojin5, .emojin6, .emojin7, .emojinPs, .emojinPc{ display:inline-table; width:17px; height:17px; background-repeat:no-repeat; background-position:0 0; } .emojin2{ background-image:url(/img/emojin2.jpg); } .emojin3{ background-image:url(/img/emojin3.png); } .emojin4{ background-image:url(/img/emojin4.jpg); } .emojin5{ background-image:url(/img/emojin5.jpg); } .emojin6{ background-image:url(/img/emojin6.jpg); } .emojin7{ background-image:url(/img/emojin7.jpg); } .alertaSuccess{ display: flex; padding: calc(var(--spacePad) * 3) var(--spaceMarg); margin-bottom: var(--spaceEntreSection); background-color: var(--color2); color: white; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .alertaDanger{ display: flex; padding: calc(var(--spacePad) * 3) var(--spaceMarg); margin-bottom: var(--spaceEntreSection); background-color: var(--color7); color: white; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } /* prueba */ .box100{ width: 1000px; height: 600px; background-color: var(--color3); } /* Orden ======================== */ .ordenA1{ order: 1;} .ordenA2{ order: 4; width: 100%; text-align: center;} .ordenA3{ order: 2;} .ordenA4{ order: 3;} /* Index ======================== */ .index100{ position: relative; z-index: 100;} .index99{ position: relative; z-index: 99;} /* Mostrar/ocultar ======================== */ .showHide{ display: none;} .hideShow{ display: flex;} /* Contactos01, suscribete ======================== */ .mensajeExito { display: none; padding: var(--padding); }