/************************************************************************************
HOJA DE ESTILOS PARA SITIOS WEB
Autor: Fernando J. Cuevas - Marzo 2016
*************************************************************************************/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap');

/* Elementos basicos HTML*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, hr,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
*, *::before, *::after { box-sizing: border-box; }
nav ul { list-style: none; /*text-align: center;*/ }
blockquote, q { quotes: none; }
::-moz-selection { color: rgb(141, 203, 138); background: rgb(21, 63, 19); }
::selection { color: rgb(141, 203, 138); background: rgb(21, 63, 19); }
::-webkit-scrollbar { width: 10px; background: #E0FFCC; }
::-webkit-scrollbar-thumb { background: #37BC3C;  border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7FFF4A; }
/* ------ Tablas ------ */
table { border-collapse: collapse; border-spacing: 0; }
table, td, th { border: none; }
*:focus { outline: 0; }
html { scroll-behavior: smooth; }
body { background-color: rgb(171, 242, 155); margin: 0; font-family: -apple-system, "Asap", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 11pt; line-height: 1.5; color: rgb(0, 0, 0); text-align: justify; }

/* ------ clases predefinidas ------ */
.container { width: 1280px; margin-right: auto; margin-left: auto; }
.principal h1 { padding: 4rem 0 1rem 1.2rem; font-size: 2.6em; color: rgb(0, 63, 26); line-height:1; }
.marcas h3 { padding: 0 0 1.2rem 0; text-align: center; font-size: 1.8em; color: rgb(131, 231, 133); }
.c_form { background: rgba(2, 85, 0, 0.5); transition: all 0.3s; outline: rgba(223, 295, 177, 0.5) 1px solid; border-radius: 12px; padding: 8px; width: 300px; margin: 0 auto; text-align:center; }
.c_form:hover { background: rgba(80, 167, 57, 0.5); }
.c_form i { font-size: 1em !important; }
/************************************************************************************
FUENTES PERSONALIZADAS - Tipografias empleadas en el sitio
*************************************************************************************/
@font-face {
	font-family: 'NanumGothic';
	src: url('fontface/NanumGothic.eot');
	src: url('fontface/NanumGothic.eot?#iefix') format('embedded-opentype'),
		url('fontface/NanumGothic.woff') format('woff'),
		url('fontface/NanumGothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/************************************************************************************
ESTILOS PERSONALIZADOS - Seccion modificable
*************************************************************************************/
footer { padding-top: 10px; background: linear-gradient(45deg, rgb(0, 28, 6), rgb(0, 88, 6), rgb(5, 105, 13));  color: #009C60; }
/* ------ barra de encabezado ------ */
.fixed-nav-menu { display: block; width: 100%; height: 55px; position: fixed; top: 0; left: 0;  background: rgba(0, 33, 10,0.6); background: linear-gradient(45deg, rgba(0, 33, 10,0.6), rgba(0, 121, 7, 0.6), rgba(21, 208, 48, 0.6)); box-shadow: 0 4px 32px rgba(0, 31, 5, 0.2); z-index: 5; backdrop-filter: blur(10px);}
.fixed-encab-menu { display: block; width: 100%; height: 55px; position: fixed; top: 0; left: 0; background-color: rgba(0, 33, 10,0.6); background: linear-gradient(45deg, rgba(0, 33, 10,0.6), rgba(0, 121, 7, 0.6), rgba(21, 208, 48, 0.6)); backdrop-filter: blur(8px); z-index: 5; }

.logo { float: left; margin: 12px 0 0 30px; }
.logo img { height: 30px; width: auto; }
.logo a { display: block; }

/* ------ secciones ------ */
#inicio, #conocenos, #servicios, #contacto { width: 100%; position: relative; overflow: hidden; }
.sec_inicio { height: 550px; display: block; padding-bottom: 10%; background: url("../elem/bg_inicio.jpg") center center no-repeat rgb(234, 255, 230); background-size: cover !important; }
.sec_conocenos  { padding-bottom: 10%; background: url("../elem/bg_conocenos.jpg") center center no-repeat rgb(174, 251, 180); background-size: cover !important; }
.sec_servicios { padding-bottom: 10%; background: url("../elem/bg_servicios.jpg") center center no-repeat rgb(96, 147, 80); background-size: cover !important; }
.sec_contactos { padding-bottom: 10%; background: url("../elem/bg_contactos.jpg") center center no-repeat rgb(43, 96, 42); background-size: cover !important; }

/* ---------- Redes sociales ---------- */
#social-box { width: 100%; text-align: center; bottom: 0; position: fixed; z-index: 10; margin: 0 auto 2rem auto; }
#social-box ul { margin: 0 auto; list-style: none; }
#social-box ul li { display: inline-block; margin: 0 12px; }
#social-box ul li:last-child { padding-right: 0; }
#social-box ul li a { text-decoration: none; color: rgb(255, 255, 255); background-color:rgba(0, 73, 27, 0.4); padding: 10px; font-size: 15pt; border-radius: 100%; width: 40px; transition: all 0.3s ease; }
#social-box ul li a:hover { transform: scale(1.3); background-color: rgb(241, 240, 195) !important; color: #009707; opacity: 1;}

/* ---------- columnas ---------- */
.col-2 { width: 48%; margin: 1em 0.7em 1.7em 0.7em; padding: 2px; display: inline-block; text-align: justify; vertical-align: top; position: relative; }
.col-1 { width: 97.666%; margin: 1em 0.7em 1.7em 0.7em; padding: 2px; display: block; text-align: justify; vertical-align: top; position: relative; clear: both; background: pink; }
.col-2 h1 { font-size: 2.4em; margin-bottom: 6px; color:rgb(21, 67, 27); }
.col-2 h2 { font-size: 2.1col-2em; margin-bottom: 6px; color:rgb(17, 112, 16); }
.col-2 h3 { font-size: 1.8em; margin-bottom: 8px; color:rgb(65, 157, 64); }
.col-2 p { font-size: 1.3em; margin-bottom: 1em; color: white; }
.col-2 a { text-decoration: none; color: rgb(101, 218, 124); transition: all ease 0.4s; }  .conten-text a:hover { text-decoration: none; color: rgb(0, 162, 4); background-color: rgb(238, 255, 182); }
.col-2 a:hover { text-decoration: none; color: rgb(169, 255, 110); }
.col-2 a:hover > i { color:rgb(27, 254, 124); } 
.col-2 i { padding:0 15px 5px; color: #02F1B0; font-size: 1.4em; transition: all 0.3s ease; }


.verde-oscuro p { color: #001902; font-weight: 400; line-height:1.3 }
.verde-oscuro h3 { color: #E2FBCD; }
.staff-imagen { display: block; padding: 3px 0; width: 100%; align-items:center; text-align:center; }
.staff-imagen img { width: 120px; height: auto; border-radius: 50%; border: 5px solid rgba(15, 108, 38, 0.4); outline: rgba(168, 237, 188, 0.5) 1px solid; }
.text_slider { position: absolute; width: 720px; top: 50%; left: 50%; transform: translate(-50%, -50%); justify-content: center; text-align: center; opacity: 0; transition: opacity 0.4s ease, filter 0.4s ease; filter: blur(15px); }
.text_slider.active { opacity: 1; filter: blur(0); }

.text_slider h2 { font-size: 4em; color: #005000; line-height: 0.9em; }
.text_slider p { font-size: 1.6em; color: black; padding: 0.5em 0; padding-bottom: 2em; line-height:1.1em; }



.resalte { background-image: linear-gradient(to right,#007300, #3FC33F); color: transparent; background-clip: text; }
.vermas { background-color: #005000CC; text-decoration: none; color: white; padding: 10px 20px; font-size: 1.4em; font-weight: normal; letter-spacing: 1px; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; }
.vermas:hover { background-color: #2FBD4BCC; }
/* Botones */
.ant, .sig { position: absolute; display: flex; justify-content: center; align-items: center; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255,0.8); color: #009707; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1em; cursor: pointer; z-index: 3; opacity: 0.3; transition: all 0.3s ease; }
.ant i, .sig i { font-size: 22px; font-weight: 800; }
.ant:hover, .sig:hover { background: rgba(240, 255, 182, 0.6); opacity: 1; }
.ant { left: 20px; }
.sig { right: 20px; }

/* ------ Mapa ------ */
#col_map { background: url("../elem/logo_fcs_blanco.png") center center no-repeat rgb(9, 31, 11);  width: 100%; height: 350px; border: 1px solid rgba(100, 148, 96, 0.4); box-shadow: 0 3px 26px rgba(0, 0, 0, 0.4); border-radius: 10px; }
.map-tip { color: rgba(255, 255, 255,0.6); font-size: 14px; padding: 12px 0; text-align: center;}

/* ------ MENU DE NAVEGACION - Centrado ------ */
.menu_nav { position: relative; display: table; margin: 0 30px 0 auto; float: right; }
.menu_nav ul { margin: 0 auto; list-style: none; }
.menu_nav ul li { margin: 0 -5px 0 0; font-family: 'Asap', sans-serif; font-size: 16px; font-weight: normal; line-height: 15px; display: inline-block; white-space: nowrap; position: relative; transition: all 0.3s; }
.menu_nav ul li a { display: block; padding: 20px 20px;  color: rgb(255,255,255); text-decoration: none; transition: all 0.25s ease-out; }
.menu_nav ul li a:hover { color: rgb(220, 220, 220); }
.menu_nav ul li:hover { color: rgb(220,220,220); }
.menu_nav ul li:hover > a, #menu_nav ul li a:hover { color: rgb(139, 222, 131); background: rgb(0, 53, 15); }
.menu_nav ul li ul { padding: 0; position: absolute; left: 0; width: auto; display: none; opacity: 0; visibility: hidden;  transition: opacity 0.3s; box-shadow: 0px 6px 22px rgba(17, 33, 43, 0.4); }
.menu_nav ul li ul li { background: rgba(0, 104, 29, 1); display: block; color: #6fcaff; white-space: nowrap; text-align: left; font-size: 14px; }
.menu_nav ul li ul li a { display: block; color: rgb(193,242,171); padding: 10px 20px; font-weight: normal; }
.menu_nav ul li ul li a:hover { background: rgb(114, 183, 61); color: rgb(255, 255, 255); }
.menu_nav ul li:hover ul { display: block; opacity: 1; visibility: visible; }
.menu_nav ul li img.lang { width: 25px; height: auto; padding-right: 8px; vertical-align: middle; margin-top: -4px; }


/* ------ Menu hamburguesa ------ */
.lateral_nav { position: relative; display: none; margin: 0 10px 0 auto; float: right; }
.lateral_nav ul { margin: 0 auto; list-style: none; }
.lateral_nav ul li { margin: 0 -5px 0 0; font-family: 'Asap', sans-serif; font-size: 16px; font-weight: normal; line-height: 16px; display: inline-block; white-space: nowrap; position: relative; transition: all 0.3s; }
.lateral_nav ul li a { display: block; cursor: pointer; padding: 16px 20px;  color: rgb(255,255,255); text-decoration: none; transition: all 0.25s ease-out; }
.lateral_nav ul li a:hover { background: rgb(0, 53, 15); color: rgb(139, 222, 131); }
.lateral_nav i { padding: 0 10px 0 0; font-size: 15px; }

/* ------ tarjetas de servicios ------ */
.cards-section { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;  }
.card { background: rgba(248, 255, 215, 0.6); box-shadow: 0 5px 18px rgba(0,0,0,0.4); width: 250px; text-align: center; padding: 70px 8px 22px; border-radius: 12px; transition: background 0.3s ease; }
.card:hover > .boton { background-color: #31913D; }
.card h3 { margin: 10px 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); line-height: 1.2; font-weight: 800; color: white; }
.card p { font-size: 14px; color: #00390F; margin-bottom: 20px; line-height: 1.3; height: 70px; }
.boton { background-color: #015A12; color: white; text-decoration: none; padding: 8px 20px; border-radius: 5px; font-size: 1.1em; font-weight: normal; letter-spacing: 1px; cursor: pointer; transition: background 0.3s ease; }
.boton:hover { background-color: #29D44A !important; }

.c-cursos  { background: url("../elem/c-cursos.png") top center no-repeat rgba(248, 255, 215, 0.6);; background-size: contain; }
.c-editorial  { background: url("../elem/c-editorial.png") top center no-repeat rgba(248, 255, 215, 0.6);; background-size: contain; }
.c-redes  { background: url("../elem/c-redes.png") top center no-repeat rgba(248, 255, 215, 0.6);; background-size: contain; }
.c-equipos  { background: url("../elem/c-equipos.png") top center no-repeat rgba(248, 255, 215, 0.6);; background-size: contain; }

/* ---------- Navegacion lateral ---------- */
.navlateral { height: 100%; width: 100%;  position: fixed; z-index: 9; top: 0; right: 0; background-color: rgba(8, 81, 13, 0.8); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.5s ease-in-out; }
.navlateral.show { opacity: 1; visibility: visible; }

.navlateral .nav ul li a { padding: 2px; }.navlateral .nav { width: 100%; margin: -230px auto 0 auto; }
.navlateral .nav ul { margin: 20px auto 0 auto; text-align: center; list-style: none; }
.navlateral .nav ul li { font-weight: normal; display: block; white-space: nowrap; }
.navlateral .nav ul li a { padding: 2px; display: block; color: #2DDA78; text-decoration: none; font-size: 1.3rem; transition: color 0.3s; }
.navlateral .nav ul li a:hover { color: #A1FF57; }
.navlateral .nav img { width: 170px; height: auto; }
.navlateral .nav img.lang { width: 25px; height: auto; padding-right: 8px; vertical-align: middle; margin-top: -4px; }


.navlateral .cerrar { position: fixed; top: 25px; right: 25px; width: 35px; height: 35px; background:rgba(204, 255, 57, 0.4); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; justify-content: center; align-items: center;  transition: all 0.3s ease; }
.navlateral .cerrar:hover { transform: scale(1.2); background-color: rgb(241, 240, 195); color: #009707; }

/* MODAL */
.modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(8, 81, 13, 0.8); backdrop-filter: blur(8px); align-items: center;  justify-content: center; overflow: hidden; }
.modal-content { background-color: white; width: 1024px; height: 480px; padding: 0.5rem; border-radius: 6px; animation: opac 0.3s; box-shadow: 0 8px 32px rgba(0, 37, 4); overflow: auto; }
.modal-content::-webkit-scrollbar { width: 6px; background: #E0FFCC; }
.modal-content::-webkit-scrollbar-thumb { background: #37BC3C;  border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb:hover { background: #7FFF4A; }
.cargando { display: flex; justify-content: center; align-items: center; text-align: center; }
.cargando img { width: 30px; height: auto; padding-right: 10px; }
.modal-content:not(.cargando) { display: block; }
.msgerror { padding: 4px 10px; color: #B70F03; border: 1px solid #EBD5BC; background: #FFF3E5; }
@keyframes opac { from { opacity: 0 } to { opacity: 1 } }

.modal-corto { width: 500px; height: auto; padding: 0; }
.imgpago img { width: 500px; height: auto; display: flex; }


/* ---------- Carrusel de marcas ---------- */
.carousel-container { width: 100%; overflow: hidden; padding: 10px;  background: transparent; }
.carousel-track { display: flex; align-items: center; }
.carousel-track img { height: 40px; margin: 0 30px; object-fit: contain; filter: opacity(0.8); transition: all 0.2s ease; }
.carousel-track img:hover { filter: saturate(2); transform: scale(1.2);  }

/* ----------INTERNAS ---------- */
.int-col-2 { width: 47.666%; margin: 0.7em; padding: 2px; display: inline-block; text-align: justify; vertical-align: top; position: relative; }
.int-col-2 h2 { font-size: 1.9em; margin-bottom: 6px; color:rgb(0, 107, 21); }
.int-col-2 h3 { font-size: 1.6em; margin-bottom: 8px; color:rgb(0, 107, 21); }
.int-col-2 p { font-size: 1em; margin-bottom: 1em; color: black; }
.int-col-2 a { text-decoration: none; color: rgb(101, 218, 124); transition: all ease 0.4s; }  .conten-text a:hover { text-decoration: none; color: rgb(0, 162, 4); background-color: rgb(238, 255, 182); }
.int-col-2 a:hover { text-decoration: none; color: rgb(169, 255, 110); }
.int-col-2 a:hover > i { color:rgb(27, 254, 124); } 
.int-col-2 i { padding:0 15px 5px; color: #02F1B0; font-size: 1.4em; transition: all 0.3s ease; }