.elementor-222 .elementor-element.elementor-element-efbabab{--display:flex;overflow:visible;}.elementor-222 .elementor-element.elementor-element-a324239 .elementor-repeater-item-a8da1c2 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://iesdivinojesus.edu.pe/wp-content/uploads/2026/09/images__26_-removebg-preview.png);background-size:cover;}.elementor-222 .elementor-element.elementor-element-a324239 .elementor-repeater-item-a8da1c2 .swiper-slide-contents{margin-right:auto;}.elementor-222 .elementor-element.elementor-element-a324239 .elementor-repeater-item-a8da1c2 .swiper-slide-inner{align-items:center;}.elementor-222 .elementor-element.elementor-element-a324239 .swiper-slide{transition-duration:calc(5000ms*1.2);height:763px;}.elementor-222 .elementor-element.elementor-element-a324239 .swiper-slide-contents{max-width:66%;}.elementor-222 .elementor-element.elementor-element-a324239 .swiper-slide-inner{text-align:center;}.elementor-222 .elementor-element.elementor-element-a324239 .elementor-slide-heading{font-family:"Arial", Sans-serif;}.elementor-222 .elementor-element.elementor-element-8d64242{--display:flex;overflow:visible;}.elementor-222 .elementor-element.elementor-element-4125c26{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;overflow:visible;}.elementor-222 .elementor-element.elementor-element-891296c{--display:flex;overflow:visible;}.elementor-222 .elementor-element.elementor-element-33ba5b1{--display:flex;overflow:visible;}.elementor-222 .elementor-element.elementor-element-7d2e9c2{--display:flex;overflow:visible;}.elementor-222 .elementor-element.elementor-element-6bd2016{width:var( --container-widget-width, 16.956% );max-width:16.956%;margin:5px 5px calc(var(--kit-widget-spacing, 0px) + 5px) 5px;--container-widget-width:16.956%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-222 .elementor-element.elementor-element-6bd2016.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button-content-wrapper{flex-direction:row;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button span{gap:15px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-group{padding-right:calc( 7px/2 );padding-left:calc( 7px/2 );margin-bottom:22px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-form-fields-wrapper{margin-left:calc( -7px/2 );margin-right:calc( -7px/2 );margin-bottom:-22px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-labels-inline .elementor-field-group > label{padding-left:11px;}body:not(.rtl) .elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-labels-inline .elementor-field-group > label{padding-right:11px;}body .elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-labels-above .elementor-field-group > label{padding-bottom:11px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-type-html{padding-bottom:0px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;border-width:21px 21px 21px 21px;border-radius:4px 4px 4px 4px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;border-width:21px 21px 21px 21px;border-radius:4px 4px 4px 4px;}.elementor-222 .elementor-element.elementor-element-6bd2016 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button[type="submit"]{color:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-222 .elementor-element.elementor-element-6bd2016 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}@media(max-width:1024px){.elementor-222 .elementor-element.elementor-element-4125c26{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-222 .elementor-element.elementor-element-4125c26{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-efbabab *//* ============================================================ SLIDER INSTITUCIONAL IESTP SANGARARÁ Clase del widget: sg-slider-pro ============================================================ */ .sg-slider-pro{ --sg-blue:#0A6EB4; --sg-blue-dark:#005299; --sg-blue-light:#004A8F; --sg-blue-claro:#1A8FE3; --sg-blue-oscuro:#002C4F; --sg-white:#FFFFFF; width:100% !important; position:relative; font-family: "Segoe UI", Arial, sans-serif !important; } /* ============================================================ CONTENEDOR GENERAL ============================================================ */ .sg-slider-pro .elementor-widget-container{ position:relative; overflow:hidden; border-radius:28px !important; background: linear-gradient( 135deg, rgb(0 45 85 / 95%), rgb(0 32 60 / 98%) ); box-shadow: 0 25px 60px rgba(0,45,85,.16); } /* ============================================================ SLIDER / SWIPER ============================================================ */ .sg-slider-pro .swiper, .sg-slider-pro .swiper-container{ position:relative; overflow:hidden !important; border-radius:28px !important; } /* ============================================================ CADA SLIDE ============================================================ */ .sg-slider-pro .swiper-slide{ position:relative !important; overflow:hidden !important; min-height:620px; background: linear-gradient( 135deg, rgb(0 45 85 / 95%), rgb(0 32 60 / 98%) ) !important; } /* ============================================================ IMAGEN DE FONDO ============================================================ */ .sg-slider-pro .swiper-slide-bg{ position:absolute; inset:0; width:100%; height:100%; background-position:center center !important; background-size:cover !important; transform:scale(1.04); transition: transform 6s ease !important; } .sg-slider-pro .swiper-slide-active .swiper-slide-bg{ transform:scale(1); } /* ============================================================ OVERLAY OSCURO ============================================================ */ .sg-slider-pro .swiper-slide::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( 90deg, rgb(0 20 40 / 91%) 0%, rgb(0 32 60 / 82%) 34%, rgb(0 45 85 / 55%) 62%, rgb(0 45 85 / 18%) 100% ); } /* BRILLO AZUL */ .sg-slider-pro .swiper-slide::after{ content:""; position:absolute; z-index:1; width:600px; height:600px; top:-280px; right:-170px; border-radius:50%; pointer-events:none; background: radial-gradient( circle, rgba(255,255,255,.15) 0%, rgba(26,143,227,.10) 42%, transparent 70% ); } /* ============================================================ CONTENIDO DEL SLIDE ============================================================ */ .sg-slider-pro .swiper-slide-inner{ position:relative !important; z-index:3 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; min-height:620px !important; padding: 70px 9% !important; text-align:left !important; } /* CONTENEDOR DEL TEXTO */ .sg-slider-pro .swiper-slide-contents{ width:100% !important; max-width:720px !important; margin:0 !important; text-align:left !important; } /* ============================================================ PEQUEÑO DETALLE SUPERIOR ============================================================ */ .sg-slider-pro .swiper-slide-contents::before{ content:"IESTP SANGARARÁ"; display:inline-flex; align-items:center; margin-bottom:20px; padding:9px 15px; color:#5BB8F5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:10px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; } /* ============================================================ TÍTULO ============================================================ */ .sg-slider-pro .elementor-slide-heading{ max-width:700px !important; margin: 0 0 18px !important; padding:0 !important; color:#FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(40px,5vw,65px) !important; font-weight:900 !important; line-height:1.03 !important; letter-spacing:-1.5px !important; text-shadow: 0 4px 20px rgba(0,0,0,.20); } /* ============================================================ LÍNEA AZUL ============================================================ */ .sg-slider-pro .elementor-slide-heading::after{ content:""; display:block; width:90px; height:6px; margin-top:18px; border-radius:999px; background: linear-gradient( 90deg, #1A8FE3, #0A6EB4, #005299 ); box-shadow: 0 5px 14px rgba(0,45,85,.25); } /* ============================================================ DESCRIPCIÓN ============================================================ */ .sg-slider-pro .elementor-slide-description{ max-width:640px !important; margin: 0 0 28px !important; color: rgba(255,255,255,.91) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:16px !important; font-weight:400 !important; line-height:1.8 !important; } /* ============================================================ BOTÓN ============================================================ */ .sg-slider-pro .elementor-slide-button{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:52px !important; padding: 0 25px !important; color:#FFFFFF !important; background: linear-gradient( 135deg, #1A8FE3 0%, #0A6EB4 40%, #005299 100% ) !important; border: 0 !important; border-radius:13px !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:13px !important; font-weight:850 !important; text-decoration:none !important; text-transform:none !important; box-shadow: 0 13px 28px rgba(0,45,85,.28) !important; transition: transform .3s ease, box-shadow .3s ease !important; } .sg-slider-pro .elementor-slide-button:hover{ color:#FFFFFF !important; transform: translateY(-4px); box-shadow: 0 18px 35px rgba(0,45,85,.38) !important; } /* FLECHA PEQUEÑA EN BOTÓN */ .sg-slider-pro .elementor-slide-button::after{ content:"→"; margin-left:9px; font-size:17px; line-height:1; } /* ============================================================ FLECHAS DEL SLIDER ============================================================ */ .sg-slider-pro .elementor-swiper-button, .sg-slider-pro .swiper-button-prev, .sg-slider-pro .swiper-button-next{ width:52px !important; height:52px !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#FFFFFF !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius:50% !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition: transform .3s ease, background .3s ease, color .3s ease !important; } .sg-slider-pro .elementor-swiper-button:hover, .sg-slider-pro .swiper-button-prev:hover, .sg-slider-pro .swiper-button-next:hover{ color:#FFFFFF !important; background: linear-gradient( 135deg, #1A8FE3, #0A6EB4 ) !important; transform: scale(1.08); } /* TAMAÑO DEL ICONO */ .sg-slider-pro .elementor-swiper-button svg{ width:20px !important; height:20px !important; fill:currentColor !important; } /* POSICIÓN */ .sg-slider-pro .elementor-swiper-button-prev{ left:23px !important; } .sg-slider-pro .elementor-swiper-button-next{ right:23px !important; } /* ============================================================ PAGINACIÓN ============================================================ */ .sg-slider-pro .swiper-pagination{ position:absolute !important; left:50% !important; bottom:23px !important; width:auto !important; display:flex; align-items:center; gap:8px; padding: 9px 13px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius:999px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); transform: translateX(-50%); } /* DOT NORMAL */ .sg-slider-pro .swiper-pagination-bullet{ width:9px !important; height:9px !important; margin:0 !important; background: rgba(255,255,255,.50) !important; opacity:1 !important; border-radius:999px !important; transition: width .3s ease, background .3s ease !important; } /* DOT ACTIVO */ .sg-slider-pro .swiper-pagination-bullet-active{ width:28px !important; background: linear-gradient( 90deg, #1A8FE3, #0A6EB4 ) !important; } /* ============================================================ LÍNEA DECORATIVA INFERIOR ============================================================ */ .sg-slider-pro::after{ content:""; position:absolute; z-index:10; left:0; bottom:0; width:100%; height:6px; pointer-events:none; background: linear-gradient( 90deg, #1A8FE3, #0A6EB4, #005299 ); } /* ============================================================ ANIMACIONES DEL CONTENIDO ============================================================ */ .sg-slider-pro .swiper-slide-active .swiper-slide-contents{ animation: sgSliderContent .8s ease both; } @keyframes sgSliderContent{ from{ opacity:0; transform: translateY(25px); } to{ opacity:1; transform: translateY(0); } } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-slider-pro .swiper-slide, .sg-slider-pro .swiper-slide-inner{ min-height:560px !important; } .sg-slider-pro .swiper-slide-inner{ padding: 60px 8% !important; } .sg-slider-pro .elementor-slide-heading{ font-size: clamp(38px,6vw,54px) !important; } .sg-slider-pro .elementor-slide-description{ max-width:560px !important; font-size:15px !important; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-slider-pro .elementor-widget-container, .sg-slider-pro .swiper, .sg-slider-pro .swiper-container{ border-radius:20px !important; } .sg-slider-pro .swiper-slide{ min-height:550px !important; } .sg-slider-pro .swiper-slide-inner{ min-height:550px !important; align-items:flex-end !important; padding: 45px 20px 75px !important; } .sg-slider-pro .swiper-slide::before{ background: linear-gradient( 180deg, rgb(0 20 40 / 22%) 0%, rgb(0 20 40 / 53%) 40%, rgb(0 20 40 / 96%) 100% ); } .sg-slider-pro .swiper-slide-contents::before{ margin-bottom:14px; padding: 7px 11px; font-size:8px; } .sg-slider-pro .elementor-slide-heading{ margin-bottom: 13px !important; font-size: 34px !important; line-height: 1.07 !important; } .sg-slider-pro .elementor-slide-heading::after{ width:70px; height:5px; margin-top:13px; } .sg-slider-pro .elementor-slide-description{ margin-bottom: 20px !important; font-size: 13px !important; line-height: 1.65 !important; } .sg-slider-pro .elementor-slide-button{ min-height: 45px !important; padding: 0 18px !important; font-size: 11px !important; } .sg-slider-pro .elementor-swiper-button, .sg-slider-pro .swiper-button-prev, .sg-slider-pro .swiper-button-next{ width: 42px !important; height: 42px !important; } .sg-slider-pro .elementor-swiper-button-prev{ left: 9px !important; } .sg-slider-pro .elementor-swiper-button-next{ right: 9px !important; } } /* ============================================================ MÓVILES PEQUEÑOS ============================================================ */ @media(max-width:480px){ .sg-slider-pro .swiper-slide, .sg-slider-pro .swiper-slide-inner{ min-height: 520px !important; } .sg-slider-pro .elementor-slide-heading{ font-size: 30px !important; } .sg-slider-pro .elementor-slide-description{ font-size: 12.5px !important; } } /* ============================================================ FIX FULL WIDTH REAL SLIDER PRODUCCIÓN AGROPECUARIA ============================================================ */ /* CONTENEDOR PADRE */ .sg-slider-full{ position:relative !important; width:100vw !important; max-width:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; padding:0 !important; gap:0 !important; --gap:0px !important; --row-gap:0px !important; --column-gap:0px !important; overflow:hidden !important; } /* SI ES CONTAINER DE ELEMENTOR */ .sg-slider-full.e-con, .e-con.sg-slider-full{ width:100vw !important; max-width:100vw !important; flex-basis:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; } /* QUITAR POSIBLES LIMITACIONES INTERNAS */ .sg-slider-full > .e-con-inner{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } /* ============================================================ WIDGET SLIDER ============================================================ */ .sg-slider-full .sg-slider-pro{ position:relative !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; left:auto !important; } /* ============================================================ CONTENEDOR INTERNO ============================================================ */ .sg-slider-full .sg-slider-pro .elementor-widget-container{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; /* QUITAMOS REDONDEO EXTERIOR PORQUE AHORA LLEGA A LOS BORDES */ border-radius:0 !important; } /* ============================================================ SWIPER ============================================================ */ .sg-slider-full .sg-slider-pro .swiper, .sg-slider-full .sg-slider-pro .swiper-container, .sg-slider-full .sg-slider-pro .elementor-slides-wrapper{ width:100% !important; max-width:none !important; margin:0 !important; border-radius:0 !important; } /* ============================================================ CADA SLIDE ============================================================ */ .sg-slider-full .sg-slider-pro .swiper-slide{ width:100% !important; max-width:none !important; min-height:620px !important; } /* ============================================================ IMAGEN ============================================================ */ .sg-slider-full .sg-slider-pro .swiper-slide-bg{ width:100% !important; height:100% !important; background-size:cover !important; background-position:center center !important; } /* ============================================================ CONTENIDO EL SLIDER ES FULL WIDTH, PERO EL TEXTO NO QUEDA PEGADO AL BORDE ============================================================ */ .sg-slider-full .sg-slider-pro .swiper-slide-inner{ width:100% !important; max-width:1600px !important; min-height:620px !important; margin-left:auto !important; margin-right:auto !important; padding: 70px 7% !important; } /* ============================================================ FRANJA INFERIOR ============================================================ */ .sg-slider-full .sg-slider-pro::after{ left:0 !important; bottom:0 !important; width:100% !important; border-radius:0 !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-slider-full .sg-slider-pro .swiper-slide, .sg-slider-full .sg-slider-pro .swiper-slide-inner{ min-height:560px !important; } .sg-slider-full .sg-slider-pro .swiper-slide-inner{ padding: 60px 6% !important; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-slider-full .sg-slider-pro .swiper-slide, .sg-slider-full .sg-slider-pro .swiper-slide-inner{ min-height:550px !important; } .sg-slider-full .sg-slider-pro .swiper-slide-inner{ padding: 45px 20px 75px !important; } } /* EVITAR SCROLL HORIZONTAL */ html, body{ overflow-x:hidden !important; } /* ============================================================ PALETA INSTITUCIONAL MORADO PRINCIPAL + AMARILLO + ROJO PEGAR AL FINAL DEL CSS ============================================================ */ .sg-slider-pro{ --sg-purple: #5B2C83; --sg-purple-dark: #35124F; --sg-purple-light: #7D4AA8; --sg-yellow: #F4C430; --sg-yellow-light: #FFD84A; --sg-red: #C62828; --sg-red-dark: #941B1B; --sg-white: #FFFFFF; } /* FONDO GENERAL DEL SLIDER */ .sg-slider-pro .elementor-widget-container, .sg-slider-pro .swiper-slide{ background: linear-gradient( 135deg, #2B103F 0%, #4A1D68 48%, #35124F 100% ) !important; } /* OVERLAY DE LAS IMÁGENES */ .sg-slider-pro .swiper-slide::before{ background: linear-gradient( 90deg, rgba(32,9,48,.95) 0%, rgba(70,27,99,.86) 35%, rgba(91,44,131,.58) 65%, rgba(91,44,131,.18) 100% ) !important; } /* BRILLO DECORATIVO */ .sg-slider-pro .swiper-slide::after{ background: radial-gradient( circle, rgba(255,216,74,.18) 0%, rgba(244,196,48,.10) 35%, rgba(91,44,131,.08) 55%, transparent 72% ) !important; } /* ETIQUETA SUPERIOR */ .sg-slider-pro .swiper-slide-contents::before{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 8px 20px rgba(53,18,79,.20) !important; } /* TÍTULO */ .sg-slider-pro .elementor-slide-heading{ color:#FFFFFF !important; } /* LÍNEA DECORATIVA DEL TÍTULO */ .sg-slider-pro .elementor-slide-heading::after{ background: linear-gradient( 90deg, #F4C430 0%, #FFD84A 45%, #C62828 46%, #941B1B 100% ) !important; box-shadow: 0 5px 15px rgba(244,196,48,.25) !important; } /* DESCRIPCIÓN */ .sg-slider-pro .elementor-slide-description{ color: rgba(255,255,255,.94) !important; } /* BOTÓN PRINCIPAL */ .sg-slider-pro .elementor-slide-button{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A 0%, #F4C430 100% ) !important; border: 1px solid rgba(255,255,255,.20) !important; box-shadow: 0 13px 28px rgba(244,196,48,.24) !important; } /* HOVER DEL BOTÓN */ .sg-slider-pro .elementor-slide-button:hover{ color:#FFFFFF !important; background: linear-gradient( 135deg, #C62828, #941B1B ) !important; box-shadow: 0 18px 35px rgba(148,27,27,.35) !important; } /* FLECHAS */ .sg-slider-pro .elementor-swiper-button, .sg-slider-pro .swiper-button-prev, .sg-slider-pro .swiper-button-next{ color:#FFFFFF !important; background: rgba(91,44,131,.45) !important; border: 1px solid rgba(255,255,255,.24) !important; } /* HOVER FLECHAS */ .sg-slider-pro .elementor-swiper-button:hover, .sg-slider-pro .swiper-button-prev:hover, .sg-slider-pro .swiper-button-next:hover{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; } /* PAGINACIÓN */ .sg-slider-pro .swiper-pagination{ background: rgba(43,16,63,.45) !important; border: 1px solid rgba(255,255,255,.18) !important; } /* PUNTOS NORMALES */ .sg-slider-pro .swiper-pagination-bullet{ background: rgba(255,255,255,.55) !important; } /* PUNTO ACTIVO */ .sg-slider-pro .swiper-pagination-bullet-active{ background: linear-gradient( 90deg, #FFD84A 0%, #F4C430 65%, #C62828 100% ) !important; } /* FRANJA INFERIOR */ .sg-slider-pro::after{ background: linear-gradient( 90deg, #35124F 0%, #5B2C83 32%, #7D4AA8 48%, #F4C430 49%, #FFD84A 68%, #C62828 82%, #941B1B 100% ) !important; } /* MÓVIL */ @media(max-width:767px){ .sg-slider-pro .swiper-slide::before{ background: linear-gradient( 180deg, rgba(53,18,79,.20) 0%, rgba(53,18,79,.55) 42%, rgba(32,9,48,.97) 100% ) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d64242 *//* ============================================================ PRESENTACIÓN DEL PROGRAMA IESTP SANGARARÁ ============================================================ */ .sg-program-intro, .sg-program-intro *, .sg-program-intro *::before, .sg-program-intro *::after{ box-sizing:border-box; } /* ============================================================ CONTENEDOR PRINCIPAL ============================================================ */ .sg-program-intro{ --azul:#172D54; --azul2:#10213F; --azul3:#23416F; --amarillo:#FFBD0A; --amarillo2:#FFD45A; --naranja:#FF9800; --naranja2:#EF6C00; --crema:#FFFAEF; --crema2:#FFF3D6; --blanco:#FFFFFF; --gris:#69768A; position:relative !important; width:100vw !important; max-width:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; min-height:650px !important; padding: 75px 52% 75px 7% !important; overflow:hidden !important; background: radial-gradient( circle at 8% 8%, rgba(255,189,10,.12), transparent 24% ), radial-gradient( circle at 95% 85%, rgba(255,152,0,.08), transparent 25% ), linear-gradient( 135deg, #FFFDF8 0%, #FFFAF0 55%, #FFF5E2 100% ) !important; font-family: "Segoe UI", Arial, sans-serif !important; } /* QUITAR GAPS DE ELEMENTOR */ .sg-program-intro.e-con{ --gap:0px !important; --row-gap:0px !important; --column-gap:0px !important; gap:0 !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-program-intro::before{ content:""; position:absolute; width:440px; height:440px; top:-310px; left:-180px; border-radius:50%; background: radial-gradient( circle, rgba(255,189,10,.25), transparent 68% ); pointer-events:none; } .sg-program-intro::after{ content:""; position:absolute; width:430px; height:430px; right:-250px; bottom:-270px; border-radius:50%; background: radial-gradient( circle, rgba(255,152,0,.13), transparent 68% ); pointer-events:none; } /* ============================================================ ENCABEZADO ============================================================ */ .sg-program-intro-title{ position:relative !important; z-index:6; width:100% !important; max-width:720px !important; margin: 0 0 22px !important; padding-top: 42px !important; text-align:left !important; } /* BADGE */ .sg-program-intro-title::before{ content:"PRESENTACIÓN DEL PROGRAMA"; position:absolute; top:0; left:0; display:inline-flex; align-items:center; justify-content:center; padding: 9px 15px; color:#D96800; background:#FFF0CA; border: 1px solid rgba(239,108,0,.11); border-radius:999px; font-family: "Segoe UI", Arial, sans-serif; font-size:8px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; } /* TITULO */ .sg-program-intro-title .elementor-heading-title{ margin:0 !important; color:#172D54 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(40px,4.7vw,58px) !important; font-weight:900 !important; line-height:1.02 !important; letter-spacing:-1.5px !important; text-align:left !important; } /* ============================================================ TEXTO INTRODUCTORIO ============================================================ */ .sg-program-intro-text{ position:relative !important; z-index:6; width:100% !important; max-width:720px !important; margin: 0 0 28px !important; } .sg-program-intro-text, .sg-program-intro-text p{ color:#69768A !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:14px !important; font-weight:400 !important; line-height:1.9 !important; text-align:left !important; } .sg-program-intro-text p{ margin: 0 0 20px !important; } .sg-program-intro-text p:last-child{ margin-bottom:0 !important; } /* RESALTADOS */ .sg-program-intro-text strong{ color:#EF6C00 !important; font-weight:850 !important; } /* ============================================================ GRID 2 X 2 ============================================================ */ .sg-program-features{ position:relative !important; z-index:6; display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; width:100% !important; max-width:720px !important; margin: 28px 0 0 !important; padding:0 !important; } /* ============================================================ CADA FEATURE ============================================================ */ .sg-program-feature{ position:relative !important; min-width:0 !important; min-height:52px !important; display:flex !important; align-items:center !important; margin:0 !important; padding: 14px 18px 14px 50px !important; background: rgba(255,255,255,.92) !important; border: 1px solid rgba(239,108,0,.18) !important; border-radius: 13px !important; box-shadow: 0 8px 22px rgba(23,45,84,.04) !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } .sg-program-feature:hover{ transform: translateY(-4px); border-color: rgba(239,108,0,.35) !important; box-shadow: 0 14px 30px rgba(23,45,84,.09) !important; } /* CHECK AMARILLO */ .sg-program-feature::before{ content:"✓"; position:absolute; left:13px; top:50%; width:27px; height:27px; display:flex; align-items:center; justify-content:center; color:#FFFFFF; background: linear-gradient( 145deg, #FFD45A, #FFBD0A, #FF9800 ); border-radius:8px; font-family: "Segoe UI", Arial, sans-serif; font-size:13px; font-weight:900; transform: translateY(-50%); box-shadow: 0 6px 14px rgba(239,108,0,.13); } /* TEXTO DEL FEATURE */ .sg-program-feature, .sg-program-feature p{ color:#172D54 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:10px !important; font-weight:750 !important; line-height:1.4 !important; text-align:left !important; } .sg-program-feature p{ margin:0 !important; } /* ============================================================ IMÁGENES ============================================================ */ .sg-program-img{ position:absolute !important; z-index:4; margin:0 !important; overflow:hidden !important; background:#FFFFFF !important; border: 6px solid #FFFFFF !important; border-radius: 22px !important; box-shadow: 0 24px 55px rgba(23,45,84,.16) !important; transition: transform .45s ease, box-shadow .45s ease !important; } .sg-program-img .elementor-widget-container{ width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; } .sg-program-img img{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; border-radius: 15px !important; transition: transform .55s ease !important; } .sg-program-img:hover img{ transform: scale(1.045); } /* ============================================================ IMAGEN GRANDE ============================================================ */ .sg-program-img-1{ width: min(440px,31vw) !important; height: 315px !important; top: 105px !important; right: 15% !important; transform: rotate(.4deg); } /* ============================================================ IMAGEN SECUNDARIA ============================================================ */ .sg-program-img-2{ width: min(310px,24vw) !important; height: 205px !important; right: 6.5% !important; bottom: 72px !important; z-index:7; transform: rotate(.5deg); } /* ============================================================ HOVER IMÁGENES ============================================================ */ .sg-program-img-1:hover{ transform: rotate(0deg) translateY(-7px); } .sg-program-img-2:hover{ transform: rotate(0deg) translateY(-7px); } /* ============================================================ CÍRCULO / SELLO SE GENERA AUTOMÁTICAMENTE ============================================================ */ .sg-program-img-1::after{ content:"Educación\A tecnológica\A productiva"; white-space:pre; position:absolute; z-index:10; right:-115px; top:15px; width:120px; height:120px; display:flex; align-items:center; justify-content:center; padding:20px; color:#FFFFFF; background: linear-gradient( 145deg, #FFD33D, #FFBD0A, #FF9800 ); border: 6px solid #FFFFFF; border-radius:50%; box-shadow: 0 16px 35px rgba(239,108,0,.17); font-family: "Segoe UI", Arial, sans-serif; font-size:10px; font-weight:900; line-height:1.35; text-align:center; pointer-events:none; } /* ============================================================ PROTECCIÓN ELEMENTOR ============================================================ */ .sg-program-intro > .elementor-element{ min-width:0 !important; } /* ============================================================ TABLET GRANDE ============================================================ */ @media(max-width:1180px){ .sg-program-intro{ min-height: 680px !important; padding: 65px 48% 70px 5% !important; } .sg-program-img-1{ width: 37vw !important; height: 300px !important; right: 9% !important; } .sg-program-img-2{ width: 27vw !important; height: 195px !important; right: 3% !important; } .sg-program-img-1::after{ right: -80px; width: 100px; height: 100px; font-size: 8px; } } /* ============================================================ TABLET ============================================================ */ @media(max-width:900px){ .sg-program-intro{ min-height:auto !important; padding: 60px 5% 65px !important; } .sg-program-intro-title, .sg-program-intro-text, .sg-program-features{ max-width: 100% !important; } /* LAS FOTOS PASAN DEBAJO DEL TEXTO */ .sg-program-img{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; display:inline-block !important; vertical-align:top; margin-top: 25px !important; } .sg-program-img-1{ width: 58% !important; height: 310px !important; margin-right: 2% !important; transform:none; } .sg-program-img-2{ width: 38% !important; height: 235px !important; transform:none; } .sg-program-img-1::after{ right: 18px; top: 18px; width: 95px; height: 95px; border-width: 4px; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-program-intro{ padding: 55px 17px 65px !important; } .sg-program-intro-title .elementor-heading-title{ font-size: 37px !important; } .sg-program-intro-text, .sg-program-intro-text p{ font-size: 13px !important; line-height: 1.75 !important; } .sg-program-features{ grid-template-columns: 1fr !important; gap: 10px !important; } .sg-program-feature{ min-height: 50px !important; } .sg-program-img-1, .sg-program-img-2{ width: 100% !important; height: 240px !important; margin: 18px 0 0 !important; } .sg-program-img-1{ margin-top: 32px !important; } .sg-program-img-1::after{ width: 82px; height: 82px; right: 14px; top: 14px; padding: 12px; font-size: 7px; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media(max-width:420px){ .sg-program-intro{ padding: 48px 14px 58px !important; } .sg-program-intro-title .elementor-heading-title{ font-size: 33px !important; } .sg-program-img-1, .sg-program-img-2{ height: 215px !important; } } /* ============================================================ EVITAR SCROLL HORIZONTAL ============================================================ */ html, body{ overflow-x:hidden !important; } /* ============================================================ PRESENTACIÓN DEL PROGRAMA SOLO CAMBIO DE PALETA A AZULES NO MODIFICA ESTRUCTURA ============================================================ */ /* ============================================================ VARIABLES + FONDO GENERAL ============================================================ */ .sg-program-intro{ --azul:rgb(0 45 85 / 95%); --azul2:#001F3B; --azul3:#075D97; --amarillo:#70C8F4; --amarillo2:#BDEAFF; --naranja:#1580C1; --naranja2:#075D97; --crema:#002D55; --crema2:#073A66; --blanco:#FFFFFF; --gris:#C7D9E7; background: radial-gradient( circle at 8% 8%, rgba(112,200,244,.18), transparent 24% ), radial-gradient( circle at 95% 85%, rgba(21,128,193,.14), transparent 25% ), linear-gradient( 135deg, rgb(0 45 85 / 99%) 0%, rgb(0 38 72 / 99%) 55%, rgb(0 25 49 / 100%) 100% ) !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-program-intro::before{ background: radial-gradient( circle, rgba(112,200,244,.25), transparent 68% ) !important; } .sg-program-intro::after{ background: radial-gradient( circle, rgba(21,128,193,.18), transparent 68% ) !important; } /* ============================================================ BADGE "PRESENTACIÓN DEL PROGRAMA" ============================================================ */ .sg-program-intro-title::before{ color:#BDEAFF !important; background: rgba(255,255,255,.08) !important; border-color: rgba(112,200,244,.20) !important; box-shadow: 0 7px 18px rgba(0,20,40,.12) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ============================================================ TÍTULO PRINCIPAL ============================================================ */ .sg-program-intro-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 20px rgba(0,20,40,.20) !important; } /* ============================================================ TEXTO INTRODUCTORIO ============================================================ */ .sg-program-intro-text, .sg-program-intro-text p{ color: rgba(255,255,255,.78) !important; } /* TEXTO DESTACADO */ .sg-program-intro-text strong{ color:#70C8F4 !important; } /* ============================================================ CUADROS 2 X 2 ============================================================ */ .sg-program-feature{ background: linear-gradient( 145deg, rgba(255,255,255,.11), rgba(255,255,255,.07) ) !important; border-color: rgba(112,200,244,.22) !important; box-shadow: 0 8px 22px rgba(0,18,35,.17) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* HOVER */ .sg-program-feature:hover{ border-color: rgba(112,200,244,.48) !important; background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(255,255,255,.09) ) !important; box-shadow: 0 14px 30px rgba(0,18,35,.25) !important; } /* ============================================================ CHECK DE CADA CUADRO ============================================================ */ .sg-program-feature::before{ color:#002D55 !important; background: linear-gradient( 145deg, #D9F3FF, #9FDEFF, #70C8F4 ) !important; box-shadow: 0 6px 14px rgba(0,20,40,.16) !important; } /* ============================================================ TEXTO DE LOS CUADROS ============================================================ */ .sg-program-feature, .sg-program-feature p{ color:#FFFFFF !important; } /* ============================================================ IMÁGENES SOLO CAMBIO DE SOMBRA / BORDE ============================================================ */ .sg-program-img{ background:#FFFFFF !important; border-color:#FFFFFF !important; box-shadow: 0 24px 55px rgba(0,18,35,.32) !important; } .sg-program-img:hover{ box-shadow: 0 30px 65px rgba(0,18,35,.42) !important; } /* ============================================================ SELLO CIRCULAR "Educación tecnológica productiva" ============================================================ */ .sg-program-img-1::after{ color:#FFFFFF !important; background: linear-gradient( 145deg, #1580C1, #075D97, #002D55 ) !important; border-color:#FFFFFF !important; box-shadow: 0 16px 35px rgba(0,20,40,.30) !important; } /* ============================================================ PALETA INSTITUCIONAL DEFINITIVA IESTP SANGARARÁ MORADO PRINCIPAL + AMARILLO + ROJO PEGAR AL FINAL DE TODO EL CSS ============================================================ */ /* ============================================================ VARIABLES + FONDO GENERAL ============================================================ */ .sg-program-intro{ --morado:#5B2C83; --morado2:#35124F; --morado3:#7D4AA8; --amarillo:#F4C430; --amarillo2:#FFD84A; --rojo:#C62828; --rojo2:#941B1B; --blanco:#FFFFFF; --gris:#E8DFEE; background: radial-gradient( circle at 8% 8%, rgba(255,216,74,.17), transparent 25% ), radial-gradient( circle at 95% 85%, rgba(198,40,40,.12), transparent 27% ), linear-gradient( 135deg, #35124F 0%, #4A1D68 50%, #2A0D3D 100% ) !important; } /* ============================================================ DECORACIÓN SUPERIOR IZQUIERDA ============================================================ */ .sg-program-intro::before{ background: radial-gradient( circle, rgba(255,216,74,.25), rgba(244,196,48,.09) 40%, transparent 70% ) !important; } /* ============================================================ DECORACIÓN INFERIOR DERECHA ============================================================ */ .sg-program-intro::after{ background: radial-gradient( circle, rgba(198,40,40,.18), rgba(125,74,168,.08) 45%, transparent 70% ) !important; } /* ============================================================ BADGE "PRESENTACIÓN DEL PROGRAMA" ============================================================ */ .sg-program-intro-title::before{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border: 1px solid rgba(255,255,255,.32) !important; box-shadow: 0 8px 20px rgba(35,8,52,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ TÍTULO PRINCIPAL ============================================================ */ .sg-program-intro-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 22px rgba(24,4,35,.30) !important; } /* ============================================================ TEXTO INTRODUCTORIO ============================================================ */ .sg-program-intro-text, .sg-program-intro-text p{ color: rgba(255,255,255,.86) !important; } /* ============================================================ TEXTO DESTACADO ============================================================ */ .sg-program-intro-text strong{ color:#FFD84A !important; font-weight:850 !important; } /* ============================================================ CUADROS / FEATURES ============================================================ */ .sg-program-feature{ background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(255,255,255,.075) ) !important; border: 1px solid rgba(255,216,74,.23) !important; box-shadow: 0 8px 24px rgba(30,5,45,.20) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* ============================================================ HOVER DE LOS CUADROS ============================================================ */ .sg-program-feature:hover{ border-color: rgba(255,216,74,.55) !important; background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(255,255,255,.10) ) !important; box-shadow: 0 15px 32px rgba(30,5,45,.30) !important; } /* ============================================================ CHECK DE CADA CUADRO ============================================================ */ .sg-program-feature::before{ color:#35124F !important; background: linear-gradient( 145deg, #FFE77F, #FFD84A, #F4C430 ) !important; box-shadow: 0 7px 16px rgba(244,196,48,.24) !important; } /* ============================================================ TEXTO DE LOS CUADROS ============================================================ */ .sg-program-feature, .sg-program-feature p{ color:#FFFFFF !important; } /* ============================================================ HOVER: ACENTO ROJO MUY SUTIL ============================================================ */ .sg-program-feature:hover::before{ color:#FFFFFF !important; background: linear-gradient( 145deg, #E44848, #C62828, #941B1B ) !important; box-shadow: 0 7px 18px rgba(198,40,40,.28) !important; } /* ============================================================ IMÁGENES ============================================================ */ .sg-program-img{ background:#FFFFFF !important; border-color:#FFFFFF !important; box-shadow: 0 25px 58px rgba(30,5,45,.32) !important; } .sg-program-img:hover{ box-shadow: 0 32px 70px rgba(30,5,45,.42) !important; } /* ============================================================ SELLO CIRCULAR "Educación tecnológica productiva" ============================================================ */ .sg-program-img-1::after{ color:#35124F !important; background: linear-gradient( 145deg, #FFE77F 0%, #FFD84A 40%, #F4C430 72%, #C62828 100% ) !important; border: 6px solid #FFFFFF !important; box-shadow: 0 16px 36px rgba(30,5,45,.30) !important; } /* ============================================================ PEQUEÑO EFECTO ROJO EN HOVER DE LAS IMÁGENES ============================================================ */ .sg-program-img:hover{ border-color: rgba(255,255,255,1) !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-program-intro{ background: radial-gradient( circle at 10% 5%, rgba(255,216,74,.14), transparent 22% ), radial-gradient( circle at 95% 90%, rgba(198,40,40,.10), transparent 25% ), linear-gradient( 160deg, #35124F 0%, #4A1D68 52%, #280B3A 100% ) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-891296c *//* ============================================================ PERFIL DE EGRESO PRODUCCIÓN AGROPECUARIA IESTP SANGARARÁ ============================================================ */ .sg-egreso, .sg-egreso *, .sg-egreso *::before, .sg-egreso *::after{ box-sizing:border-box; } /* ============================================================ CONTENEDOR PRINCIPAL ============================================================ */ .sg-egreso{ --azul:#172D54; --azul2:#10213F; --azul3:#23416F; --amarillo:#FFBD0A; --amarillo2:#FFD45A; --naranja:#FF9800; --naranja2:#EF6C00; --crema:#FFFAEF; --crema2:#FFF3D6; --blanco:#FFFFFF; --gris:#69768A; position:relative !important; width:100vw !important; max-width:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; padding: 75px 6% 90px !important; overflow:hidden !important; background: radial-gradient( circle at 6% 8%, rgba(255,189,10,.12), transparent 24% ), radial-gradient( circle at 96% 90%, rgba(255,152,0,.08), transparent 25% ), linear-gradient( 135deg, #FFFDF8 0%, #FFFAF0 54%, #FFF5E1 100% ) !important; font-family: "Segoe UI", Arial, sans-serif !important; scroll-margin-top:120px; } /* QUITAMOS GAPS DE ELEMENTOR */ .sg-egreso.e-con{ --gap:0px !important; --row-gap:0px !important; --column-gap:0px !important; gap:0 !important; } /* ============================================================ DECORACIÓN ============================================================ */ .sg-egreso::before{ content:""; position:absolute; width:430px; height:430px; top:-310px; left:-180px; border-radius:50%; background: radial-gradient( circle, rgba(255,189,10,.25), transparent 68% ); pointer-events:none; } .sg-egreso::after{ content:""; position:absolute; width:430px; height:430px; right:-250px; bottom:-280px; border-radius:50%; background: radial-gradient( circle, rgba(255,152,0,.12), transparent 68% ); pointer-events:none; } /* ============================================================ ENCABEZADO ============================================================ */ .sg-egreso-title{ position:relative !important; z-index:4; width:100% !important; max-width:900px !important; margin: 0 auto 45px !important; padding-top: 43px !important; text-align:center !important; } /* BADGE PERFIL DE EGRESO */ .sg-egreso-title::before{ content:"PERFIL DE EGRESO"; position:absolute; top:0; left:50%; transform: translateX(-50%); display:inline-flex; align-items:center; justify-content:center; padding: 9px 15px; color:#D96800; background:#FFF0CA; border: 1px solid rgba(239,108,0,.11); border-radius:999px; font-family: "Segoe UI", Arial, sans-serif; font-size:8px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; } /* TITULO */ .sg-egreso-title .elementor-heading-title{ margin:0 !important; color:#172D54 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(40px,4.5vw,57px) !important; font-weight:900 !important; line-height:1.02 !important; letter-spacing:-1.5px !important; text-align:center !important; } /* ============================================================ EDITOR GENERAL ============================================================ */ .sg-egreso-content{ position:relative !important; z-index:4; width:100% !important; max-width:1320px !important; margin:0 auto !important; padding:0 !important; } .sg-egreso-content .elementor-widget-container{ width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ DOS COLUMNAS ============================================================ */ .sg-egreso-layout{ display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap:48px; align-items:start; width:100%; } /* ============================================================ CARD GRANDE IZQUIERDO ============================================================ */ .sg-egreso-profile{ position:relative; width:100%; padding: 32px 28px 29px; overflow:hidden; background: rgba(255,255,255,.95); border: 1px solid rgba(239,108,0,.17); border-radius: 21px; box-shadow: 0 14px 36px rgba(23,45,84,.06); } /* DETALLE SUPERIOR */ .sg-egreso-profile::before{ content:""; position:absolute; left:0; top:0; width:95px; height:4px; background: linear-gradient( 90deg, #FFBD0A, #FF9800, #EF6C00 ); border-radius: 0 999px 999px 0; } /* ============================================================ TEXTO PRINCIPAL ============================================================ */ .sg-egreso-main-text{ margin: 0 0 24px !important; color:#68758A !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:14px !important; font-weight:400 !important; line-height:1.9 !important; text-align:left !important; } .sg-egreso-main-text strong{ color:#EF6C00 !important; font-weight:850 !important; } /* ============================================================ LISTA CHECK ============================================================ */ .sg-egreso-checks{ display:flex; flex-direction:column; gap:11px; } /* CADA CHECK */ .sg-egreso-check{ position:relative; width:100%; min-height:47px; display:flex; align-items:center; padding: 12px 16px 12px 42px; color:#68758A; background: linear-gradient( 135deg, #FFF8E5, #FFF2D2 ); border-radius: 12px; font-family: "Segoe UI", Arial, sans-serif; font-size:11px; font-weight:500; line-height:1.55; transition: transform .3s ease, background .3s ease; } /* CHECK */ .sg-egreso-check::before{ content:"✓"; position:absolute; left:14px; color:#EF6C00; font-size:13px; font-weight:900; } .sg-egreso-check:hover{ transform: translateX(4px); background: linear-gradient( 135deg, #FFF4D4, #FFE8B3 ); } /* ============================================================ GRID DERECHO 2x2 ============================================================ */ .sg-egreso-skills{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; width:100%; } /* ============================================================ CARD COMPETENCIA ============================================================ */ .sg-egreso-skill{ position:relative; min-height:150px; padding: 27px 24px 23px; overflow:hidden; background: rgba(255,255,255,.95); border: 1px solid rgba(239,108,0,.17); border-radius: 17px; box-shadow: 0 10px 27px rgba(23,45,84,.045); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /* HOVER */ .sg-egreso-skill:hover{ transform: translateY(-6px); border-color: rgba(239,108,0,.34); box-shadow: 0 18px 40px rgba(23,45,84,.10); } /* DECORACIÓN ESQUINA */ .sg-egreso-skill::after{ content:""; position:absolute; width:90px; height:90px; right:-48px; bottom:-50px; border-radius:50%; background: radial-gradient( circle, rgba(255,189,10,.12), transparent 68% ); pointer-events:none; } /* ============================================================ NUMERITO ============================================================ */ .sg-egreso-number{ display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:26px; margin-bottom:14px; padding: 0 8px; color:#172D54; background: linear-gradient( 145deg, #FFD45A, #FFBD0A ); border-radius: 7px; font-family: "Segoe UI", Arial, sans-serif; font-size:8px; font-weight:900; line-height:1; } /* ============================================================ TITULO COMPETENCIA ============================================================ */ .sg-egreso-skill h3{ margin: 0 0 9px !important; color:#172D54 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:15px !important; font-weight:850 !important; line-height:1.25 !important; letter-spacing:-.2px !important; } /* ============================================================ TEXTO COMPETENCIA ============================================================ */ .sg-egreso-skill p{ margin:0 !important; color:#748094 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:10.5px !important; font-weight:400 !important; line-height:1.65 !important; } /* ============================================================ SCROLL SUAVE AL HACER CLIC EN EL BOTÓN ============================================================ */ html{ scroll-behavior:smooth; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-egreso{ padding: 65px 5% 75px !important; } .sg-egreso-layout{ grid-template-columns: 1fr 1fr; gap: 28px; } .sg-egreso-skills{ grid-template-columns: 1fr; } .sg-egreso-skill{ min-height:auto; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-egreso{ padding: 55px 16px 65px !important; scroll-margin-top: 90px; } .sg-egreso-title{ margin-bottom: 30px !important; } .sg-egreso-title .elementor-heading-title{ font-size: 37px !important; } .sg-egreso-layout{ grid-template-columns: 1fr; gap: 18px; } .sg-egreso-profile{ padding: 27px 21px 23px; } .sg-egreso-main-text{ font-size: 13px !important; line-height: 1.75 !important; } .sg-egreso-skills{ grid-template-columns: 1fr; gap: 11px; } .sg-egreso-skill{ min-height:auto; padding: 23px 20px; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media(max-width:420px){ .sg-egreso{ padding: 48px 13px 58px !important; } .sg-egreso-title .elementor-heading-title{ font-size: 33px !important; } .sg-egreso-check{ font-size: 10px; } } /* ============================================================ EVITAR DESBORDAMIENTO ============================================================ */ html, body{ overflow-x:hidden !important; } /* ============================================================ PERFIL DE EGRESO SOLO CAMBIO DE PALETA A AZULES NO MODIFICA ESTRUCTURA ============================================================ */ /* ============================================================ VARIABLES + FONDO PRINCIPAL ============================================================ */ .sg-egreso{ --azul:rgb(0 45 85 / 95%); --azul2:#001F3B; --azul3:#075D97; --amarillo:#70C8F4; --amarillo2:#BDEAFF; --naranja:#1580C1; --naranja2:#075D97; --crema:#002D55; --crema2:#073A66; --blanco:#FFFFFF; --gris:#C7D9E7; background: radial-gradient( circle at 6% 8%, rgba(112,200,244,.18), transparent 24% ), radial-gradient( circle at 96% 90%, rgba(21,128,193,.14), transparent 25% ), linear-gradient( 135deg, rgb(0 45 85 / 99%) 0%, rgb(0 38 72 / 99%) 54%, rgb(0 25 49 / 100%) 100% ) !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-egreso::before{ background: radial-gradient( circle, rgba(112,200,244,.25), transparent 68% ) !important; } .sg-egreso::after{ background: radial-gradient( circle, rgba(21,128,193,.18), transparent 68% ) !important; } /* ============================================================ BADGE PERFIL DE EGRESO ============================================================ */ .sg-egreso-title::before{ color:#BDEAFF !important; background: rgba(255,255,255,.08) !important; border-color: rgba(112,200,244,.20) !important; box-shadow: 0 7px 18px rgba(0,20,40,.12) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ============================================================ TITULO PRINCIPAL ============================================================ */ .sg-egreso-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 20px rgba(0,20,40,.20) !important; } /* ============================================================ CARD GRANDE IZQUIERDO ============================================================ */ .sg-egreso-profile{ background: linear-gradient( 145deg, rgba(255,255,255,.11), rgba(255,255,255,.07) ) !important; border-color: rgba(112,200,244,.22) !important; box-shadow: 0 14px 36px rgba(0,18,35,.20) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* LINEA SUPERIOR */ .sg-egreso-profile::before{ background: linear-gradient( 90deg, #BDEAFF, #70C8F4, #1580C1 ) !important; } /* ============================================================ TEXTO PRINCIPAL ============================================================ */ .sg-egreso-main-text{ color: rgba(255,255,255,.78) !important; } .sg-egreso-main-text strong{ color:#70C8F4 !important; } /* ============================================================ CHECKS ============================================================ */ .sg-egreso-check{ color: rgba(255,255,255,.82) !important; background: linear-gradient( 135deg, rgba(112,200,244,.13), rgba(21,128,193,.10) ) !important; border: 1px solid rgba(112,200,244,.12) !important; } /* ICONO CHECK */ .sg-egreso-check::before{ color:#70C8F4 !important; } /* HOVER CHECK */ .sg-egreso-check:hover{ background: linear-gradient( 135deg, rgba(112,200,244,.20), rgba(21,128,193,.14) ) !important; } /* ============================================================ CARDS DE COMPETENCIAS ============================================================ */ .sg-egreso-skill{ background: linear-gradient( 145deg, rgba(255,255,255,.11), rgba(255,255,255,.07) ) !important; border-color: rgba(112,200,244,.22) !important; box-shadow: 0 10px 27px rgba(0,18,35,.18) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* HOVER */ .sg-egreso-skill:hover{ border-color: rgba(112,200,244,.48) !important; box-shadow: 0 18px 40px rgba(0,18,35,.28) !important; } /* DECORACION ESQUINA */ .sg-egreso-skill::after{ background: radial-gradient( circle, rgba(112,200,244,.15), transparent 68% ) !important; } /* ============================================================ NUMERO 01 / 02 / 03 / 04 ============================================================ */ .sg-egreso-number{ color:#002D55 !important; background: linear-gradient( 145deg, #D9F3FF, #9FDEFF, #70C8F4 ) !important; box-shadow: 0 6px 14px rgba(0,20,40,.14) !important; } /* ============================================================ TITULO DE COMPETENCIA ============================================================ */ .sg-egreso-skill h3{ color:#FFFFFF !important; } /* ============================================================ TEXTO DE COMPETENCIA ============================================================ */ .sg-egreso-skill p{ color: rgba(255,255,255,.72) !important; } /* ============================================================ AMPLIACIÓN PERFIL DE EGRESO ÁMBITOS DE DESEMPEÑO PRODUCCIÓN AGROPECUARIA ESTILO AZUL INSTITUCIONAL ============================================================ */ /* ============================================================ ETIQUETAS INTERNAS ============================================================ */ .sg-egreso-label{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; padding: 8px 13px; color:#BDEAFF; background: rgba(255,255,255,.08); border: 1px solid rgba(112,200,244,.20); border-radius: 999px; font-family: "Segoe UI", Arial, sans-serif; font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 7px 18px rgba(0,20,40,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================ TITULO INTERNO DE PERFIL ============================================================ */ .sg-egreso-profile h2{ margin: 0 0 20px !important; color: #FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(25px,2.5vw,34px) !important; line-height: 1.12 !important; font-weight: 900 !important; letter-spacing: -.7px !important; } /* ============================================================ AJUSTE PERFIL POR TENER MÁS TEXTO ============================================================ */ .sg-egreso-profile{ padding: 34px 30px 31px !important; } .sg-egreso-profile .sg-egreso-main-text:last-child{ margin-bottom: 0 !important; } /* ============================================================ COMPETENCIAS AHORA SON 8 ============================================================ */ .sg-egreso-skills{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: stretch; width: 100%; } /* ============================================================ TARJETAS COMPETENCIAS ============================================================ */ .sg-egreso-skill{ min-height: 205px !important; height: 100%; padding: 26px 23px 23px !important; } /* TITULO */ .sg-egreso-skill h3{ font-size: 15px !important; line-height: 1.25 !important; margin-bottom: 10px !important; } /* TEXTO */ .sg-egreso-skill p{ font-size: 10.8px !important; line-height: 1.68 !important; } /* ============================================================ ÁMBITOS DE DESEMPEÑO ============================================================ */ .sg-egreso-areas{ position:relative; width:100%; margin-top: 48px; padding: 38px 34px 34px; overflow:hidden; background: linear-gradient( 145deg, rgba(255,255,255,.105), rgba(255,255,255,.065) ); border: 1px solid rgba(112,200,244,.22); border-radius: 22px; box-shadow: 0 18px 45px rgba(0,18,35,.20); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================ LINEA SUPERIOR ============================================================ */ .sg-egreso-areas::before{ content:""; position:absolute; left:0; top:0; width: 130px; height: 4px; border-radius: 0 999px 999px 0; background: linear-gradient( 90deg, #BDEAFF, #70C8F4, #1580C1 ); } /* ============================================================ DECORACIÓN DE FONDO ============================================================ */ .sg-egreso-areas::after{ content:""; position:absolute; width: 300px; height: 300px; right: -150px; top: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(112,200,244,.12), transparent 70% ); pointer-events: none; } /* ============================================================ CABECERA ÁMBITOS ============================================================ */ .sg-egreso-areas-header{ position:relative; z-index:2; width:100%; max-width: 840px; margin-bottom: 30px; } .sg-egreso-areas-header h2{ margin: 0 0 13px !important; color: #FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(28px,3vw,40px) !important; line-height: 1.08 !important; font-weight: 900 !important; letter-spacing: -.8px !important; } .sg-egreso-areas-header p{ margin: 0 !important; max-width: 760px; color: rgba(255,255,255,.75) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 13px !important; line-height: 1.8 !important; } /* ============================================================ GRID DE ÁMBITOS ============================================================ */ .sg-egreso-areas-grid{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; width: 100%; } /* ============================================================ CADA ÁMBITO ============================================================ */ .sg-egreso-area{ position:relative; display:flex; align-items:flex-start; gap: 13px; min-height: 105px; padding: 17px 17px 16px; overflow:hidden; background: linear-gradient( 135deg, rgba(112,200,244,.105), rgba(21,128,193,.075) ); border: 1px solid rgba(112,200,244,.14); border-radius: 13px; transition: transform .30s ease, background .30s ease, border-color .30s ease, box-shadow .30s ease; } /* ============================================================ NÚMERO ============================================================ */ .sg-egreso-area > span{ flex: 0 0 auto; display:inline-flex; align-items:center; justify-content:center; width: 32px; height: 32px; border-radius: 9px; color: #002D55; background: linear-gradient( 145deg, #D9F3FF, #9FDEFF, #70C8F4 ); font-family: "Segoe UI", Arial, sans-serif; font-size: 8px; font-weight: 900; line-height: 1; box-shadow: 0 6px 14px rgba(0,20,40,.14); } /* ============================================================ TEXTO ÁMBITOS ============================================================ */ .sg-egreso-area p{ margin: 2px 0 0 !important; color: rgba(255,255,255,.78) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 11px !important; line-height: 1.65 !important; font-weight: 450 !important; } /* ============================================================ HOVER ============================================================ */ .sg-egreso-area:hover{ transform: translateY(-4px); border-color: rgba(112,200,244,.40); background: linear-gradient( 135deg, rgba(112,200,244,.17), rgba(21,128,193,.12) ); box-shadow: 0 13px 28px rgba(0,18,35,.17); } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-egreso-layout{ grid-template-columns: 1fr !important; gap: 22px !important; } .sg-egreso-skills{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sg-egreso-skill{ min-height: 190px !important; } .sg-egreso-areas{ margin-top: 35px; padding: 32px 27px 28px; } .sg-egreso-areas-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-egreso-profile{ padding: 27px 21px 24px !important; } .sg-egreso-profile h2{ font-size: 26px !important; } .sg-egreso-skills{ grid-template-columns: 1fr !important; gap: 11px !important; } .sg-egreso-skill{ min-height: auto !important; padding: 23px 20px !important; } .sg-egreso-areas{ margin-top: 26px; padding: 27px 20px 22px; border-radius: 18px; } .sg-egreso-areas-header{ margin-bottom: 22px; } .sg-egreso-areas-header h2{ font-size: 29px !important; } .sg-egreso-areas-header p{ font-size: 12.5px !important; line-height: 1.7 !important; } .sg-egreso-areas-grid{ grid-template-columns: 1fr; gap: 10px; } .sg-egreso-area{ min-height: auto; padding: 15px; } .sg-egreso-area:hover{ transform: none; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media(max-width:420px){ .sg-egreso-profile h2{ font-size: 24px !important; } .sg-egreso-areas{ padding: 24px 16px 19px; } .sg-egreso-areas-header h2{ font-size: 26px !important; } .sg-egreso-area p{ font-size: 10.5px !important; } } /* ============================================================ PALETA INSTITUCIONAL DEFINITIVA PERFIL DE EGRESO - IESTP SANGARARÁ MORADO PRINCIPAL + AMARILLO + ROJO PEGAR AL FINAL DEL CSS ============================================================ */ /* ============================================================ VARIABLES + FONDO PRINCIPAL ============================================================ */ .sg-egreso{ --morado:#5B2C83; --morado2:#35124F; --morado3:#7D4AA8; --amarillo:#F4C430; --amarillo2:#FFD84A; --rojo:#C62828; --rojo2:#941B1B; --blanco:#FFFFFF; --gris:#E7DDEA; background: radial-gradient( circle at 6% 8%, rgba(255,216,74,.17), transparent 24% ), radial-gradient( circle at 96% 90%, rgba(198,40,40,.13), transparent 26% ), linear-gradient( 135deg, #35124F 0%, #4A1D68 54%, #280B3A 100% ) !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-egreso::before{ background: radial-gradient( circle, rgba(255,216,74,.25), transparent 68% ) !important; } .sg-egreso::after{ background: radial-gradient( circle, rgba(198,40,40,.18), transparent 68% ) !important; } /* ============================================================ BADGE "PERFIL DE EGRESO" ============================================================ */ .sg-egreso-title::before{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border-color: rgba(255,255,255,.30) !important; box-shadow: 0 7px 18px rgba(30,5,45,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ TÍTULO PRINCIPAL ============================================================ */ .sg-egreso-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 20px rgba(25,3,36,.30) !important; } /* ============================================================ CARD GRANDE IZQUIERDO ============================================================ */ .sg-egreso-profile{ background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(255,255,255,.075) ) !important; border-color: rgba(255,216,74,.23) !important; box-shadow: 0 14px 36px rgba(28,5,42,.25) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* ============================================================ LÍNEA SUPERIOR DEL CARD ============================================================ */ .sg-egreso-profile::before{ background: linear-gradient( 90deg, #FFD84A, #F4C430, #C62828 ) !important; } /* ============================================================ TÍTULO INTERNO ============================================================ */ .sg-egreso-profile h2{ color:#FFFFFF !important; } /* ============================================================ TEXTO PRINCIPAL ============================================================ */ .sg-egreso-main-text{ color: rgba(255,255,255,.82) !important; } .sg-egreso-main-text strong{ color:#FFD84A !important; } /* ============================================================ ETIQUETAS INTERNAS ============================================================ */ .sg-egreso-label{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border-color: rgba(255,255,255,.28) !important; box-shadow: 0 7px 18px rgba(30,5,45,.16) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ CHECKS ============================================================ */ .sg-egreso-check{ color: rgba(255,255,255,.86) !important; background: linear-gradient( 135deg, rgba(255,216,74,.12), rgba(255,255,255,.07) ) !important; border: 1px solid rgba(255,216,74,.17) !important; } /* ICONO CHECK */ .sg-egreso-check::before{ color:#FFD84A !important; } /* HOVER CHECK */ .sg-egreso-check:hover{ background: linear-gradient( 135deg, rgba(255,216,74,.20), rgba(198,40,40,.11) ) !important; } /* ============================================================ CARDS DE COMPETENCIAS ============================================================ */ .sg-egreso-skill{ background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(255,255,255,.075) ) !important; border-color: rgba(255,216,74,.22) !important; box-shadow: 0 10px 27px rgba(27,4,40,.22) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* HOVER */ .sg-egreso-skill:hover{ border-color: rgba(255,216,74,.52) !important; box-shadow: 0 18px 40px rgba(28,5,42,.32) !important; } /* DECORACIÓN DE ESQUINA */ .sg-egreso-skill::after{ background: radial-gradient( circle, rgba(198,40,40,.13), transparent 68% ) !important; } /* ============================================================ NÚMEROS 01 / 02 / 03... ============================================================ */ .sg-egreso-number{ color:#35124F !important; background: linear-gradient( 145deg, #FFE77F, #FFD84A, #F4C430 ) !important; box-shadow: 0 6px 14px rgba(244,196,48,.22) !important; } /* ============================================================ HOVER NÚMEROS - ACENTO ROJO ============================================================ */ .sg-egreso-skill:hover .sg-egreso-number{ color:#FFFFFF !important; background: linear-gradient( 145deg, #E44848, #C62828, #941B1B ) !important; } /* ============================================================ TÍTULOS DE COMPETENCIA ============================================================ */ .sg-egreso-skill h3{ color:#FFFFFF !important; } /* ============================================================ TEXTO DE COMPETENCIA ============================================================ */ .sg-egreso-skill p{ color: rgba(255,255,255,.76) !important; } /* ============================================================ ÁMBITOS DE DESEMPEÑO ============================================================ */ .sg-egreso-areas{ background: linear-gradient( 145deg, rgba(255,255,255,.12), rgba(255,255,255,.065) ) !important; border: 1px solid rgba(255,216,74,.22) !important; box-shadow: 0 18px 45px rgba(28,5,42,.27) !important; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* ============================================================ LÍNEA SUPERIOR ÁMBITOS ============================================================ */ .sg-egreso-areas::before{ background: linear-gradient( 90deg, #FFD84A, #F4C430, #C62828 ) !important; } /* ============================================================ DECORACIÓN DE FONDO ÁMBITOS ============================================================ */ .sg-egreso-areas::after{ background: radial-gradient( circle, rgba(198,40,40,.13), transparent 70% ) !important; } /* ============================================================ TÍTULO ÁMBITOS ============================================================ */ .sg-egreso-areas-header h2{ color:#FFFFFF !important; } /* TEXTO INTRODUCTORIO ÁMBITOS */ .sg-egreso-areas-header p{ color: rgba(255,255,255,.78) !important; } /* ============================================================ CADA ÁMBITO ============================================================ */ .sg-egreso-area{ background: linear-gradient( 135deg, rgba(255,216,74,.10), rgba(255,255,255,.06) ) !important; border: 1px solid rgba(255,216,74,.15) !important; } /* ============================================================ NÚMERO DEL ÁMBITO ============================================================ */ .sg-egreso-area > span{ color:#35124F !important; background: linear-gradient( 145deg, #FFE77F, #FFD84A, #F4C430 ) !important; box-shadow: 0 6px 14px rgba(244,196,48,.20) !important; } /* ============================================================ TEXTO DE CADA ÁMBITO ============================================================ */ .sg-egreso-area p{ color: rgba(255,255,255,.82) !important; } /* ============================================================ HOVER ÁMBITOS ============================================================ */ .sg-egreso-area:hover{ border-color: rgba(255,216,74,.45) !important; background: linear-gradient( 135deg, rgba(255,216,74,.17), rgba(198,40,40,.10) ) !important; box-shadow: 0 13px 28px rgba(28,5,42,.23) !important; } /* NÚMERO ROJO AL HACER HOVER */ .sg-egreso-area:hover > span{ color:#FFFFFF !important; background: linear-gradient( 145deg, #E44848, #C62828, #941B1B ) !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-egreso{ background: radial-gradient( circle at 8% 5%, rgba(255,216,74,.14), transparent 23% ), radial-gradient( circle at 95% 92%, rgba(198,40,40,.11), transparent 25% ), linear-gradient( 160deg, #35124F 0%, #4A1D68 52%, #280B3A 100% ) !important; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-0a84660 *//* ============================================================ ETIQUETAS DE CADA HORARIO CORREGIR TEXTO NEGRO ============================================================ */ .sg-horario-bloque{ width:100%; margin-bottom:42px; } /* CONTENEDOR DE LA ETIQUETA */ .sg-horario-etiqueta{ position:relative; display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; width:100%; margin:0 0 14px !important; padding: 13px 18px !important; color:#FFFFFF !important; background: linear-gradient( 135deg, rgba(7,93,151,.95), rgba(0,45,85,.98) ) !important; border: 1px solid rgba(112,200,244,.25) !important; border-left: 4px solid #70C8F4 !important; border-radius: 11px !important; box-shadow: 0 8px 22px rgba(0,18,35,.18); font-family: "Segoe UI", Arial, sans-serif !important; } /* ============================================================ PRIMER AÑO / SEGUNDO AÑO / TERCER AÑO ============================================================ */ .sg-horario-etiqueta > span{ display:inline-flex !important; align-items:center; justify-content:center; padding: 6px 10px !important; color: #BDEAFF !important; background: rgba(112,200,244,.10) !important; border: 1px solid rgba(112,200,244,.16) !important; border-radius: 999px !important; font-size: 8px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .9px !important; text-transform: uppercase !important; } /* ============================================================ I P.A. · GRUPO A ============================================================ */ .sg-horario-etiqueta > strong{ color: #FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; font-weight: 850 !important; line-height: 1.2 !important; letter-spacing: .2px !important; } /* ============================================================ PERIODO ACADÉMICO ============================================================ */ .sg-horario-etiqueta > small{ margin-left:auto !important; color: rgba(255,255,255,.72) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; } /* ============================================================ PROTECCIÓN CONTRA ESTILOS DE ELEMENTOR ============================================================ */ .sg-horario-etiqueta, .sg-horario-etiqueta span, .sg-horario-etiqueta strong, .sg-horario-etiqueta small{ text-decoration:none !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-horario-etiqueta{ padding: 12px 13px !important; gap: 7px !important; } .sg-horario-etiqueta > strong{ font-size: 12px !important; } .sg-horario-etiqueta > small{ width:100%; margin-left: 0 !important; padding-left: 2px; font-size: 8.5px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-33ba5b1 *//* ============================================================ HORARIOS ACADÉMICOS IESTP SANGARARÁ VERSIÓN AZUL - SOLO TABLA ============================================================ */ .sg-horarios, .sg-horarios *, .sg-horarios *::before, .sg-horarios *::after{ box-sizing:border-box; } /* ============================================================ CONTENEDOR GENERAL ============================================================ */ .sg-horarios{ --azul:rgb(0 45 85 / 95%); --azul2:#001F3B; --azul3:#075D97; --celeste:#70C8F4; --celeste2:#BDEAFF; --celeste3:#DDF4FF; --blanco:#FFFFFF; --gris:#C6D7E4; position:relative !important; width:100vw !important; max-width:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; padding: 75px 6% 90px !important; overflow:hidden !important; background: radial-gradient( circle at 5% 7%, rgba(112,200,244,.17), transparent 24% ), radial-gradient( circle at 96% 88%, rgba(21,128,193,.13), transparent 25% ), linear-gradient( 135deg, rgb(0 45 85 / 99%) 0%, rgb(0 38 72 / 99%) 55%, rgb(0 25 49 / 100%) 100% ) !important; font-family: "Segoe UI", Arial, sans-serif !important; } /* QUITAR GAPS NATIVOS DE ELEMENTOR */ .sg-horarios.e-con{ gap:0 !important; --gap:0px !important; --row-gap:0px !important; --column-gap:0px !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-horarios::before{ content:""; position:absolute; width:440px; height:440px; left:-200px; top:-310px; border-radius:50%; background: radial-gradient( circle, rgba(112,200,244,.22), transparent 68% ); pointer-events:none; } .sg-horarios::after{ content:""; position:absolute; width:440px; height:440px; right:-260px; bottom:-290px; border-radius:50%; background: radial-gradient( circle, rgba(21,128,193,.17), transparent 68% ); pointer-events:none; } /* ============================================================ ENCABEZADO ============================================================ */ .sg-horarios-title{ position:relative !important; z-index:4; width:100% !important; max-width:900px !important; margin: 0 auto 15px !important; padding-top: 42px !important; text-align:center !important; } /* BADGE HORARIOS */ .sg-horarios-title::before{ content:"HORARIOS"; position:absolute; top:0; left:50%; transform: translateX(-50%); display:inline-flex; align-items:center; justify-content:center; padding: 9px 15px; color:#BDEAFF; background: rgba(255,255,255,.08); border: 1px solid rgba(112,200,244,.20); border-radius:999px; font-family: "Segoe UI", Arial, sans-serif; font-size:8px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================================ TITULO ============================================================ */ .sg-horarios-title .elementor-heading-title{ margin:0 !important; color:#FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(40px,4.5vw,56px) !important; font-weight:900 !important; line-height:1.04 !important; letter-spacing:-1.4px !important; text-align:center !important; text-shadow: 0 5px 20px rgba(0,20,40,.20); } /* ============================================================ INTRO ============================================================ */ .sg-horarios-intro{ position:relative !important; z-index:4; width:100% !important; max-width:760px !important; margin: 0 auto 42px !important; text-align:center !important; } .sg-horarios-intro, .sg-horarios-intro p{ color: rgba(255,255,255,.76) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:13px !important; font-weight:400 !important; line-height:1.75 !important; text-align:center !important; } .sg-horarios-intro p{ margin:0 !important; } /* ============================================================ EDITOR QUE CONTIENE EL HORARIO ============================================================ */ .sg-horarios-content{ position:relative !important; z-index:4; width:100% !important; max-width:1260px !important; margin: 0 auto !important; padding:0 !important; } .sg-horarios-content .elementor-widget-container{ width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ DISTRIBUCIÓN AHORA SOLO UNA COLUMNA ============================================================ */ .sg-horarios-layout{ display:grid !important; grid-template-columns: minmax(0,1fr) !important; width:100% !important; max-width:1100px !important; margin: 0 auto !important; gap:0 !important; align-items:start !important; } /* ============================================================ ELIMINAR POR COMPLETO LAS 3 TARJETAS TURNO / PRÁCTICAS / ACTUALIZACIÓN ============================================================ */ .sg-horarios-info{ display:none !important; } /* POR SEGURIDAD */ .sg-horarios-card{ display:none !important; } /* ============================================================ CONTENEDOR DE TABLA ============================================================ */ .sg-horario-table-wrap{ position:relative; width:100%; overflow:hidden; background: rgba(255,255,255,.98); border: 1px solid rgba(112,200,244,.22); border-radius: 20px; box-shadow: 0 20px 48px rgba(0,18,35,.25); } /* BARRA SUPERIOR DECORATIVA */ .sg-horario-table-wrap::before{ content:""; position:absolute; z-index:5; top:0; left:0; width:100%; height:4px; background: linear-gradient( 90deg, #BDEAFF, #70C8F4, #1580C1, #075D97 ); pointer-events:none; } /* ============================================================ TABLA ============================================================ */ .sg-horario-table{ width:100%; margin:0 !important; padding:0 !important; border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed; background: #FFFFFF; } /* ============================================================ CABECERA DE TABLA ============================================================ */ .sg-horario-table thead{ background: linear-gradient( 110deg, rgb(0 45 85 / 100%), #001F3B ); } .sg-horario-table th{ height:58px; padding: 13px 10px !important; color: #FFFFFF !important; background: transparent !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.07) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1.3 !important; text-align: center !important; } .sg-horario-table th:last-child{ border-right: 0 !important; } /* COLUMNA HORA */ .sg-horario-table th:first-child{ width:110px; } /* ============================================================ FILAS ============================================================ */ .sg-horario-table tbody tr{ transition: background .25s ease; } /* IMPARES */ .sg-horario-table tbody tr:nth-child(odd){ background: #FFFFFF; } /* PARES */ .sg-horario-table tbody tr:nth-child(even){ background: #F0F8FC; } /* HOVER */ .sg-horario-table tbody tr:hover{ background: #DDF3FF; } /* ============================================================ CELDAS ============================================================ */ .sg-horario-table td{ height:55px; padding: 12px 10px !important; color: #49627A !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #E3EDF3 !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 10px !important; font-weight: 450 !important; line-height: 1.4 !important; text-align: center !important; vertical-align: middle !important; } .sg-horario-table tbody tr:last-child td{ border-bottom: 0 !important; } /* ============================================================ COLUMNA HORARIO ============================================================ */ .sg-horario-table td:first-child{ color: #002D55 !important; font-weight: 750 !important; white-space: nowrap; background: rgba(112,200,244,.07) !important; } /* ============================================================ HOVER DE CADA CELDA ============================================================ */ .sg-horario-table tbody td{ transition: color .25s ease, background .25s ease; } .sg-horario-table tbody td:hover{ color: #002D55 !important; background: rgba(112,200,244,.12) !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-horarios{ padding: 65px 5% 75px !important; } .sg-horarios-layout{ max-width: 100% !important; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-horarios{ padding: 55px 15px 65px !important; } .sg-horarios-title .elementor-heading-title{ font-size: 36px !important; } .sg-horarios-intro{ margin-bottom: 30px !important; } .sg-horarios-intro, .sg-horarios-intro p{ font-size: 12px !important; } /* SCROLL SOLO DE LA TABLA */ .sg-horario-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; } .sg-horario-table{ min-width: 720px; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media(max-width:420px){ .sg-horarios{ padding: 48px 12px 58px !important; } .sg-horarios-title .elementor-heading-title{ font-size: 32px !important; } } /* ============================================================ EVITAR SCROLL HORIZONTAL GENERAL ============================================================ */ html, body{ overflow-x:hidden !important; } /* ============================================================ PALETA INSTITUCIONAL DEFINITIVA HORARIOS ACADÉMICOS - IESTP SANGARARÁ MORADO PRINCIPAL + AMARILLO + ROJO PEGAR AL FINAL DEL CSS ============================================================ */ /* ============================================================ VARIABLES + FONDO GENERAL ============================================================ */ .sg-horarios{ --morado:#5B2C83; --morado2:#35124F; --morado3:#7D4AA8; --amarillo:#F4C430; --amarillo2:#FFD84A; --rojo:#C62828; --rojo2:#941B1B; --blanco:#FFFFFF; --gris:#E8DFEE; background: radial-gradient( circle at 5% 7%, rgba(255,216,74,.17), transparent 24% ), radial-gradient( circle at 96% 88%, rgba(198,40,40,.13), transparent 25% ), linear-gradient( 135deg, #35124F 0%, #4A1D68 55%, #280B3A 100% ) !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-horarios::before{ background: radial-gradient( circle, rgba(255,216,74,.25), transparent 68% ) !important; } .sg-horarios::after{ background: radial-gradient( circle, rgba(198,40,40,.18), transparent 68% ) !important; } /* ============================================================ BADGE HORARIOS ============================================================ */ .sg-horarios-title::before{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border: 1px solid rgba(255,255,255,.30) !important; box-shadow: 0 8px 20px rgba(30,5,45,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ TÍTULO ============================================================ */ .sg-horarios-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 20px rgba(25,3,36,.30) !important; } /* ============================================================ TEXTO INTRODUCTORIO ============================================================ */ .sg-horarios-intro, .sg-horarios-intro p{ color: rgba(255,255,255,.82) !important; } /* ============================================================ CONTENEDOR DE LA TABLA ============================================================ */ .sg-horario-table-wrap{ background: #FFFFFF !important; border: 1px solid rgba(255,216,74,.32) !important; box-shadow: 0 20px 48px rgba(30,5,45,.30) !important; } /* ============================================================ BARRA SUPERIOR DECORATIVA ============================================================ */ .sg-horario-table-wrap::before{ background: linear-gradient( 90deg, #5B2C83 0%, #7D4AA8 28%, #FFD84A 50%, #F4C430 67%, #C62828 83%, #941B1B 100% ) !important; } /* ============================================================ CABECERA DE LA TABLA ============================================================ */ .sg-horario-table thead{ background: linear-gradient( 110deg, #35124F 0%, #5B2C83 55%, #4A1D68 100% ) !important; } /* ============================================================ CABECERAS ============================================================ */ .sg-horario-table th{ color:#FFFFFF !important; background: transparent !important; border-right: 1px solid rgba(255,255,255,.10) !important; } /* ============================================================ PRIMERA CABECERA - HORA ============================================================ */ .sg-horario-table th:first-child{ background: rgba(255,216,74,.10) !important; } /* ============================================================ FILAS IMPARES ============================================================ */ .sg-horario-table tbody tr:nth-child(odd){ background: #FFFFFF !important; } /* ============================================================ FILAS PARES MORADO MUY CLARO ============================================================ */ .sg-horario-table tbody tr:nth-child(even){ background: #F8F3FB !important; } /* ============================================================ HOVER DE FILA ============================================================ */ .sg-horario-table tbody tr:hover{ background: #FFF7D6 !important; } /* ============================================================ CELDAS ============================================================ */ .sg-horario-table td{ color: #574C60 !important; border-bottom: 1px solid #EDE4F1 !important; } /* ============================================================ COLUMNA DE HORA ============================================================ */ .sg-horario-table td:first-child{ color: #5B2C83 !important; background: rgba(91,44,131,.055) !important; font-weight: 800 !important; } /* ============================================================ HOVER DE CELDAS ============================================================ */ .sg-horario-table tbody td:hover{ color: #35124F !important; background: rgba(255,216,74,.18) !important; } /* ============================================================ HOVER ESPECIAL EN COLUMNA HORA ============================================================ */ .sg-horario-table tbody td:first-child:hover{ color:#FFFFFF !important; background: linear-gradient( 135deg, #C62828, #941B1B ) !important; } /* ============================================================ CABECERA - PEQUEÑO ACENTO AMARILLO ============================================================ */ .sg-horario-table thead th{ position:relative; } .sg-horario-table thead th::after{ content:""; position:absolute; left:50%; bottom:7px; width:18px; height:2px; border-radius:999px; background: rgba(255,216,74,.70); transform: translateX(-50%); } /* ============================================================ HOVER DE CABECERAS ============================================================ */ .sg-horario-table th{ transition: background .25s ease, color .25s ease !important; } .sg-horario-table th:hover{ background: rgba(255,216,74,.12) !important; } /* ============================================================ TABLA COMPLETA ============================================================ */ .sg-horario-table{ background: #FFFFFF !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:767px){ .sg-horarios{ background: radial-gradient( circle at 8% 5%, rgba(255,216,74,.14), transparent 23% ), radial-gradient( circle at 95% 92%, rgba(198,40,40,.10), transparent 25% ), linear-gradient( 160deg, #35124F 0%, #4A1D68 52%, #280B3A 100% ) !important; } .sg-horario-table-wrap{ border-color: rgba(255,216,74,.28) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7d2e9c2 *//* ============================================================ FORMULARIO DE INFORMACIÓN PRODUCCIÓN AGROPECUARIA IESTP SANGARARÁ ============================================================ */ .sg-program-form, .sg-program-form *, .sg-program-form *::before, .sg-program-form *::after{ box-sizing:border-box; } /* ============================================================ CONTENEDOR PRINCIPAL ============================================================ */ .sg-program-form{ --azul:#172D54; --azul2:#10213F; --azul3:#2B4167; --amarillo:#FFBD0A; --amarillo2:#FFD45A; --naranja:#FF9800; --naranja2:#EF6C00; --blanco:#FFFFFF; position:relative !important; width:100vw !important; max-width:100vw !important; left:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; display:grid !important; grid-template-columns: minmax(300px,.82fr) minmax(500px,1.18fr) !important; grid-template-rows: auto 1fr !important; column-gap:65px !important; row-gap:18px !important; align-items:center !important; min-height:620px !important; padding: 75px 7% 80px !important; overflow:hidden !important; background: linear-gradient( rgba(255,255,255,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.022) 1px, transparent 1px ), radial-gradient( circle at 98% 4%, rgba(255,189,10,.10), transparent 25% ), linear-gradient( 120deg, #172D54 0%, #10213F 100% ) !important; background-size: 42px 42px, 42px 42px, auto, auto !important; font-family: "Segoe UI", Arial, sans-serif !important; } /* QUITAR GAP NATIVO */ .sg-program-form.e-con{ --gap:0px !important; --row-gap:0px !important; --column-gap:0px !important; gap:0 !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-program-form::before{ content:""; position:absolute; width:550px; height:550px; left:-300px; top:-360px; border-radius:50%; background: radial-gradient( circle, rgba(255,189,10,.10), transparent 68% ); pointer-events:none; } .sg-program-form::after{ content:""; position:absolute; width:520px; height:520px; right:-280px; bottom:-350px; border-radius:50%; background: radial-gradient( circle, rgba(255,152,0,.09), transparent 68% ); pointer-events:none; } /* ============================================================ ENCABEZADO IZQUIERDO ============================================================ */ .sg-program-form-title{ position:relative !important; z-index:4; grid-column:1 !important; grid-row:1 !important; width:100% !important; max-width:600px !important; margin:0 !important; padding-top:45px !important; align-self:end !important; text-align:left !important; } /* BADGE */ .sg-program-form-title::before{ content:"FORMULARIO PARA INFORMACIÓN"; position:absolute; top:0; left:0; display:inline-flex; align-items:center; justify-content:center; padding: 9px 15px; color:#FFD45A; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); border-radius:999px; font-family: "Segoe UI", Arial, sans-serif; font-size:8px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ============================================================ TITULO ============================================================ */ .sg-program-form-title .elementor-heading-title{ margin:0 !important; color:#FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: clamp(43px,4.7vw,61px) !important; font-weight:900 !important; line-height:1.02 !important; letter-spacing:-1.7px !important; text-align:left !important; } /* LINEA DE ACENTO */ .sg-program-form-title::after{ content:""; display:block; width:80px; height:5px; margin-top:21px; border-radius:999px; background: linear-gradient( 90deg, #FFBD0A, #FF9800, #EF6C00 ); } /* ============================================================ DESCRIPCIÓN IZQUIERDA ============================================================ */ .sg-program-form-desc{ position:relative !important; z-index:4; grid-column:1 !important; grid-row:2 !important; align-self:start !important; width:100% !important; max-width:590px !important; margin: 4px 0 0 !important; } .sg-program-form-desc, .sg-program-form-desc p{ color: rgba(255,255,255,.80) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:13px !important; font-weight:400 !important; line-height:1.85 !important; text-align:left !important; } .sg-program-form-desc p{ margin:0 !important; } /* ============================================================ FORMULARIO / CARD DERECHO ============================================================ */ .sg-program-form-box{ position:relative !important; z-index:5; grid-column:2 !important; grid-row: 1 / span 2 !important; width:100% !important; max-width:680px !important; margin-left:auto !important; padding: 29px 25px 26px !important; overflow:hidden !important; background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.065) ) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 21px !important; box-shadow: 0 22px 50px rgba(0,0,0,.16) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* BRILLO INTERNO */ .sg-program-form-box::before{ content:""; position:absolute; width:200px; height:200px; right:-110px; bottom:-130px; border-radius:50%; background: radial-gradient( circle, rgba(255,189,10,.12), transparent 68% ); pointer-events:none; } /* ============================================================ CONTENEDORES DE ELEMENTOR ============================================================ */ .sg-program-form-box .elementor-widget-container{ position:relative !important; z-index:2; width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ FORM ============================================================ */ .sg-program-form-box .elementor-form{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; column-gap: 13px !important; row-gap: 14px !important; width:100% !important; } /* ============================================================ CAMPOS EN 2 COLUMNAS ============================================================ */ .sg-program-form-box .elementor-field-group-nombres, .sg-program-form-box .elementor-field-group-apellidos, .sg-program-form-box .elementor-field-group-correo, .sg-program-form-box .elementor-field-group-celular{ grid-column: span 1 !important; width:100% !important; } /* ============================================================ CAMPOS ANCHO COMPLETO ============================================================ */ .sg-program-form-box .elementor-field-group-interes, .sg-program-form-box .elementor-field-group-mensaje, .sg-program-form-box .elementor-field-type-submit{ grid-column: 1 / -1 !important; width:100% !important; } /* ============================================================ GRUPOS ============================================================ */ .sg-program-form-box .elementor-field-group{ margin:0 !important; padding:0 !important; } /* ============================================================ LABELS ============================================================ */ .sg-program-form-box .elementor-field-label{ display:block !important; margin: 0 0 7px !important; color:#FFFFFF !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:10px !important; font-weight:800 !important; line-height:1.2 !important; } /* ============================================================ INPUTS / SELECT / TEXTAREA ============================================================ */ .sg-program-form-box .elementor-field, .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select, .sg-program-form-box textarea{ width:100% !important; margin:0 !important; color:#172D54 !important; background: rgba(255,255,255,.97) !important; border: 1px solid transparent !important; border-radius: 12px !important; outline:0 !important; box-shadow:none !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size:11px !important; font-weight:400 !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important; } /* INPUT ALTURA */ .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select{ min-height: 43px !important; padding: 0 14px !important; } /* TEXTAREA */ .sg-program-form-box textarea{ min-height: 140px !important; padding: 14px !important; resize:vertical !important; } /* ============================================================ PLACEHOLDER ============================================================ */ .sg-program-form-box .elementor-field::placeholder, .sg-program-form-box input::placeholder, .sg-program-form-box textarea::placeholder{ color:#8792A1 !important; opacity:1 !important; } /* ============================================================ FOCUS ============================================================ */ .sg-program-form-box .elementor-field:focus, .sg-program-form-box input:focus, .sg-program-form-box select:focus, .sg-program-form-box textarea:focus{ background:#FFFFFF !important; border-color: #FFBD0A !important; box-shadow: 0 0 0 4px rgba(255,189,10,.13) !important; } /* ============================================================ BOTÓN ============================================================ */ .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ width:auto !important; min-width:155px !important; min-height:46px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding: 0 23px !important; color:#172D54 !important; background: linear-gradient( 135deg, #FFD45A, #FFBD0A 45%, #FF9800 ) !important; border: 0 !important; border-radius: 12px !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 12px !important; font-weight: 850 !important; line-height:1 !important; text-transform:none !important; box-shadow: 0 12px 26px rgba(239,108,0,.25) !important; cursor:pointer !important; transition: transform .3s ease, box-shadow .3s ease !important; } /* FLECHA DEL BOTÓN */ .sg-program-form-box .elementor-button::after, .sg-program-form-box button[type="submit"]::after{ content:"→"; margin-left:9px; font-size:16px; line-height:1; } /* HOVER BOTÓN */ .sg-program-form-box .elementor-button:hover, .sg-program-form-box button[type="submit"]:hover{ transform: translateY(-3px); box-shadow: 0 17px 33px rgba(239,108,0,.34) !important; } /* ============================================================ ERRORES / MENSAJES ============================================================ */ .sg-program-form-box .elementor-message{ grid-column: 1 / -1; margin: 12px 0 0 !important; padding: 11px 13px !important; border-radius: 10px !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 10px !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-program-form{ grid-template-columns: minmax(260px,.75fr) minmax(430px,1.25fr) !important; column-gap: 40px !important; padding: 65px 5% 70px !important; } .sg-program-form-title .elementor-heading-title{ font-size: 45px !important; } .sg-program-form-box{ padding: 25px 21px 23px !important; } } /* ============================================================ TABLET PEQUEÑA / MÓVIL ============================================================ */ @media(max-width:800px){ .sg-program-form{ display:grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 20px !important; min-height:auto !important; padding: 58px 18px 65px !important; } .sg-program-form-title, .sg-program-form-desc, .sg-program-form-box{ grid-column: 1 !important; grid-row: auto !important; width:100% !important; max-width: 100% !important; } .sg-program-form-title{ align-self:auto !important; } .sg-program-form-desc{ margin-bottom: 15px !important; } .sg-program-form-box{ margin: 0 !important; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:600px){ .sg-program-form{ padding: 52px 15px 60px !important; } .sg-program-form-title .elementor-heading-title{ font-size: 36px !important; } .sg-program-form-desc, .sg-program-form-desc p{ font-size: 12px !important; } /* TODOS LOS CAMPOS A UNA COLUMNA */ .sg-program-form-box .elementor-form{ grid-template-columns: 1fr !important; } .sg-program-form-box .elementor-field-group-nombres, .sg-program-form-box .elementor-field-group-apellidos, .sg-program-form-box .elementor-field-group-correo, .sg-program-form-box .elementor-field-group-celular, .sg-program-form-box .elementor-field-group-interes, .sg-program-form-box .elementor-field-group-mensaje, .sg-program-form-box .elementor-field-type-submit{ grid-column: 1 !important; } .sg-program-form-box{ padding: 22px 17px 20px !important; border-radius: 17px !important; } .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ width: 100% !important; } } /* ============================================================ MÓVIL PEQUEÑO ============================================================ */ @media(max-width:420px){ .sg-program-form{ padding: 47px 12px 55px !important; } .sg-program-form-title .elementor-heading-title{ font-size: 32px !important; } } /* ============================================================ EVITAR DESBORDAMIENTO ============================================================ */ html, body{ overflow-x:hidden !important; } /* ============================================================ FORMULARIO PRODUCCIÓN AGROPECUARIA MEJORA VISUAL AZUL PEGAR AL FINAL DEL CSS ACTUAL ============================================================ */ /* ============================================================ PALETA GENERAL ============================================================ */ .sg-program-form{ --azul-principal:rgb(0 45 85 / 95%); --azul-solido:#002D55; --azul-oscuro:#001D38; --azul-medio:#075D97; --azul-vivo:#1384C7; --celeste:#70C8F4; --celeste-claro:#BDEAFF; --blanco:#FFFFFF; } /* ============================================================ FONDO DE LA SECCIÓN ============================================================ */ .sg-program-form{ background: linear-gradient( rgba(255,255,255,.023) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.023) 1px, transparent 1px ), radial-gradient( circle at 96% 8%, rgba(112,200,244,.14), transparent 25% ), radial-gradient( circle at 8% 95%, rgba(19,132,199,.10), transparent 24% ), linear-gradient( 120deg, rgb(0 45 85 / 99%) 0%, #062E55 52%, #001D38 100% ) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; } /* DECORACIONES */ .sg-program-form::before{ background: radial-gradient( circle, rgba(112,200,244,.16), transparent 68% ) !important; } .sg-program-form::after{ background: radial-gradient( circle, rgba(19,132,199,.14), transparent 68% ) !important; } /* ============================================================ BADGE ============================================================ */ .sg-program-form-title::before{ color:#BDEAFF !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(112,200,244,.20) !important; box-shadow: 0 8px 22px rgba(0,20,40,.12) !important; } /* ============================================================ TITULO ============================================================ */ .sg-program-form-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 22px rgba(0,20,40,.24) !important; } /* LÍNEA BAJO TITULO */ .sg-program-form-title::after{ background: linear-gradient( 90deg, #BDEAFF, #70C8F4, #1384C7 ) !important; box-shadow: 0 5px 15px rgba(112,200,244,.20); } /* ============================================================ DESCRIPCIÓN ============================================================ */ .sg-program-form-desc, .sg-program-form-desc p{ color: rgba(255,255,255,.78) !important; } /* ============================================================ CARD DEL FORMULARIO ============================================================ */ .sg-program-form-box{ padding: 32px 30px 30px !important; background: linear-gradient( 145deg, rgba(255,255,255,.13), rgba(255,255,255,.065) ) !important; border: 1px solid rgba(112,200,244,.22) !important; border-radius: 25px !important; box-shadow: 0 28px 65px rgba(0,15,30,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* BRILLO INFERIOR */ .sg-program-form-box::before{ background: radial-gradient( circle, rgba(112,200,244,.15), transparent 68% ) !important; } /* ============================================================ FIX IMPORTANTE: EL GRID DEBE IR EN elementor-form-fields-wrapper ============================================================ */ .sg-program-form-box .elementor-form-fields-wrapper{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 15px 14px !important; width:100% !important; margin:0 !important; } /* QUITAR ANCHOS NATIVOS DE ELEMENTOR */ .sg-program-form-box .elementor-field-group{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; flex:none !important; } /* ============================================================ CAMPOS EN 2 COLUMNAS ============================================================ */ .sg-program-form-box .elementor-field-group-nombres, .sg-program-form-box .elementor-field-group-apellidos, .sg-program-form-box .elementor-field-group-correo, .sg-program-form-box .elementor-field-group-celular{ grid-column: span 1 !important; } /* ============================================================ CAMPOS ANCHO COMPLETO ============================================================ */ .sg-program-form-box .elementor-field-group-interes, .sg-program-form-box .elementor-field-group-mensaje, .sg-program-form-box .elementor-field-type-submit{ grid-column: 1 / -1 !important; } /* ============================================================ LABELS ============================================================ */ .sg-program-form-box .elementor-field-label{ margin: 0 0 7px !important; color: rgba(255,255,255,.94) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.2 !important; } /* ============================================================ INPUTS / SELECT / TEXTAREA ============================================================ */ .sg-program-form-box .elementor-field, .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select, .sg-program-form-box textarea{ width:100% !important; color: #163C5D !important; background: #F8FCFF !important; border: 1px solid rgba(112,200,244,.26) !important; border-radius: 12px !important; outline: none !important; box-shadow: inset 0 1px 2px rgba(0,45,85,.025) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 11px !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease !important; } /* ============================================================ INPUTS NORMALES ============================================================ */ .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select{ min-height: 47px !important; padding: 0 14px !important; } /* ============================================================ TEXTAREA ============================================================ */ .sg-program-form-box textarea{ min-height: 135px !important; padding: 14px !important; resize: vertical !important; } /* ============================================================ PLACEHOLDERS ============================================================ */ .sg-program-form-box input::placeholder, .sg-program-form-box textarea::placeholder{ color: #8294A5 !important; opacity: 1 !important; } /* ============================================================ FOCUS ============================================================ */ .sg-program-form-box .elementor-field:focus, .sg-program-form-box input:focus, .sg-program-form-box select:focus, .sg-program-form-box textarea:focus{ background: #FFFFFF !important; border-color: #70C8F4 !important; box-shadow: 0 0 0 4px rgba(112,200,244,.14), 0 7px 22px rgba(0,45,85,.07) !important; } /* ============================================================ SELECT ============================================================ */ .sg-program-form-box select{ cursor:pointer !important; } /* ============================================================ BOTÓN COMPLETAMENTE AZUL ============================================================ */ .sg-program-form-box .elementor-field-type-submit{ margin-top: 2px !important; } .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ width:100% !important; min-height: 50px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap: 9px !important; padding: 0 22px !important; color: #FFFFFF !important; background: linear-gradient( 110deg, #075D97 0%, #0E78B8 50%, #1384C7 100% ) !important; border: 1px solid rgba(189,234,255,.20) !important; border-radius: 12px !important; box-shadow: 0 13px 28px rgba(0,25,48,.28) !important; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 11px !important; font-weight: 850 !important; cursor: pointer !important; transition: transform .3s ease, box-shadow .3s ease, background .3s ease !important; } /* FLECHA */ .sg-program-form-box .elementor-button::after, .sg-program-form-box button[type="submit"]::after{ content:"→"; margin-left: 4px; font-size: 17px; transition: transform .3s ease; } /* HOVER */ .sg-program-form-box .elementor-button:hover, .sg-program-form-box button[type="submit"]:hover{ background: linear-gradient( 110deg, #0A6BA7, #1384C7, #31A7E8 ) !important; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,22,43,.36) !important; } .sg-program-form-box .elementor-button:hover::after, .sg-program-form-box button[type="submit"]:hover::after{ transform: translateX(4px); } /* ============================================================ MENSAJES ============================================================ */ .sg-program-form-box .elementor-message{ grid-column: 1 / -1 !important; padding: 12px 14px !important; color:#FFFFFF !important; background: rgba(112,200,244,.10) !important; border: 1px solid rgba(112,200,244,.20); border-radius: 10px !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1024px){ .sg-program-form-box{ padding: 27px 23px 25px !important; } } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:800px){ .sg-program-form-box{ margin-top: 10px !important; } } @media(max-width:600px){ .sg-program-form-box .elementor-form-fields-wrapper{ grid-template-columns: 1fr !important; gap: 13px !important; } .sg-program-form-box .elementor-field-group-nombres, .sg-program-form-box .elementor-field-group-apellidos, .sg-program-form-box .elementor-field-group-correo, .sg-program-form-box .elementor-field-group-celular, .sg-program-form-box .elementor-field-group-interes, .sg-program-form-box .elementor-field-group-mensaje, .sg-program-form-box .elementor-field-type-submit{ grid-column: 1 !important; } .sg-program-form-box{ padding: 22px 17px 20px !important; border-radius: 19px !important; } } /* ============================================================ AJUSTE PARA QUITAR ESPACIO VACÍO A LA DERECHA ============================================================ */ /* La caja del formulario ya no ocupa un ancho exagerado */ .sg-program-form-box{ width:100% !important; max-width:640px !important; /* puedes probar 620px o 660px */ margin-left:auto !important; margin-right:auto !important; } /* Grid interno del formulario */ .sg-program-form-box .elementor-form-fields-wrapper{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important; width:100% !important; } /* Todos los grupos ocupan bien su espacio */ .sg-program-form-box .elementor-field-group{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } /* Primeras 4 filas en 2 columnas */ .sg-program-form-box .elementor-field-group:nth-child(1), .sg-program-form-box .elementor-field-group:nth-child(2), .sg-program-form-box .elementor-field-group:nth-child(3), .sg-program-form-box .elementor-field-group:nth-child(4){ grid-column:span 1 !important; } /* Interés, mensaje y botón en ancho completo */ .sg-program-form-box .elementor-field-group:nth-child(5), .sg-program-form-box .elementor-field-group:nth-child(6), .sg-program-form-box .elementor-field-group:nth-child(7){ grid-column:1 / -1 !important; } /* Campos al 100% */ .sg-program-form-box input, .sg-program-form-box select, .sg-program-form-box textarea, .sg-program-form-box .elementor-field{ width:100% !important; max-width:100% !important; } /* Mensaje más alto */ .sg-program-form-box textarea{ min-height:140px !important; } /* Botón ancho completo */ .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ width:100% !important; } /* Móvil */ @media(max-width:767px){ .sg-program-form-box{ max-width:100% !important; } .sg-program-form-box .elementor-form-fields-wrapper{ grid-template-columns:1fr !important; } .sg-program-form-box .elementor-field-group{ grid-column:1 / -1 !important; } } /* ============================================================ FIX DEFINITIVO HACER QUE EL FORMULARIO OCUPE TODO EL CARD ============================================================ */ /* 1. MUY IMPORTANTE: QUITAMOS EL GRID DEL FORM PADRE QUE ESTABA CREANDO LA MITAD VACÍA ============================================================ */ .sg-program-form-box .elementor-form{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ 2. EL WRAPPER REAL DE LOS CAMPOS OCUPA TODO ============================================================ */ .sg-program-form-box .elementor-form-fields-wrapper{ display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:15px 16px !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } /* ============================================================ 3. ELIMINAR ANCHOS DE ELEMENTOR EN CADA CAMPO ============================================================ */ .sg-program-form-box .elementor-field-group{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; margin:0 !important; padding:0 !important; min-width:0 !important; } /* ============================================================ 4. PRIMEROS 4 CAMPOS = 2 COLUMNAS ============================================================ */ .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(1), .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(2), .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(3), .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(4){ grid-column:span 1 !important; } /* ============================================================ 5. INTERÉS = ANCHO COMPLETO ============================================================ */ .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(5){ grid-column:1 / -1 !important; } /* ============================================================ 6. MENSAJE = ANCHO COMPLETO ============================================================ */ .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group:nth-child(6){ grid-column:1 / -1 !important; } /* ============================================================ 7. BOTÓN = ANCHO COMPLETO ============================================================ */ .sg-program-form-box .elementor-field-type-submit{ grid-column:1 / -1 !important; width:100% !important; } /* ============================================================ 8. TODOS LOS INPUTS OCUPAN EL 100% ============================================================ */ .sg-program-form-box input, .sg-program-form-box select, .sg-program-form-box textarea, .sg-program-form-box .elementor-field{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } /* ============================================================ 9. INPUTS MÁS PROPORCIONADOS ============================================================ */ .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select{ min-height:48px !important; padding: 0 15px !important; } /* ============================================================ 10. MENSAJE MÁS AMPLIO ============================================================ */ .sg-program-form-box textarea{ width:100% !important; min-height:145px !important; padding: 14px 15px !important; } /* ============================================================ 11. BOTÓN ============================================================ */ .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ width:100% !important; min-height:50px !important; margin:0 !important; } /* ============================================================ 12. CARD FORMULARIO ============================================================ */ .sg-program-form-box{ width:100% !important; max-width:680px !important; margin-left:auto !important; margin-right:auto !important; padding: 30px !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:600px){ .sg-program-form-box .elementor-form-fields-wrapper{ grid-template-columns: 1fr !important; } .sg-program-form-box .elementor-form-fields-wrapper > .elementor-field-group{ grid-column: 1 / -1 !important; } .sg-program-form-box{ padding: 22px 17px !important; } } /* ============================================================ PALETA INSTITUCIONAL DEFINITIVA FORMULARIO - IESTP SANGARARÁ MORADO PRINCIPAL + AMARILLO + ROJO PEGAR AL FINAL DEL CSS ============================================================ */ /* ============================================================ VARIABLES ============================================================ */ .sg-program-form{ --morado:#5B2C83; --morado-oscuro:#35124F; --morado-profundo:#280B3A; --morado-claro:#7D4AA8; --amarillo:#F4C430; --amarillo-claro:#FFD84A; --rojo:#C62828; --rojo-oscuro:#941B1B; --blanco:#FFFFFF; } /* ============================================================ FONDO GENERAL ============================================================ */ .sg-program-form{ background: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ), radial-gradient( circle at 96% 8%, rgba(255,216,74,.16), transparent 25% ), radial-gradient( circle at 8% 95%, rgba(198,40,40,.11), transparent 25% ), linear-gradient( 120deg, #5B2C83 0%, #35124F 55%, #280B3A 100% ) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; } /* ============================================================ DECORACIONES ============================================================ */ .sg-program-form::before{ background: radial-gradient( circle, rgba(255,216,74,.18), transparent 68% ) !important; } .sg-program-form::after{ background: radial-gradient( circle, rgba(198,40,40,.15), transparent 68% ) !important; } /* ============================================================ BADGE FORMULARIO PARA INFORMACIÓN ============================================================ */ .sg-program-form-title::before{ color:#35124F !important; background: linear-gradient( 135deg, #FFD84A, #F4C430 ) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 8px 22px rgba(30,5,45,.20) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ TÍTULO PRINCIPAL ============================================================ */ .sg-program-form-title .elementor-heading-title{ color:#FFFFFF !important; text-shadow: 0 5px 22px rgba(25,3,36,.30) !important; } /* ============================================================ LÍNEA DEBAJO DEL TÍTULO ============================================================ */ .sg-program-form-title::after{ background: linear-gradient( 90deg, #FFD84A 0%, #F4C430 55%, #C62828 100% ) !important; box-shadow: 0 5px 15px rgba(244,196,48,.22) !important; } /* ============================================================ DESCRIPCIÓN ============================================================ */ .sg-program-form-desc, .sg-program-form-desc p{ color: rgba(255,255,255,.84) !important; } /* ============================================================ CARD DEL FORMULARIO ============================================================ */ .sg-program-form-box{ background: linear-gradient( 145deg, rgba(255,255,255,.14), rgba(255,255,255,.075) ) !important; border: 1px solid rgba(255,216,74,.22) !important; box-shadow: 0 28px 65px rgba(25,3,38,.30), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ============================================================ BRILLO INTERNO DEL CARD ============================================================ */ .sg-program-form-box::before{ background: radial-gradient( circle, rgba(255,216,74,.14), transparent 68% ) !important; } /* ============================================================ LABELS ============================================================ */ .sg-program-form-box .elementor-field-label{ color: rgba(255,255,255,.96) !important; } /* ============================================================ INPUTS SE MANTIENEN BLANCOS ============================================================ */ .sg-program-form-box .elementor-field, .sg-program-form-box input[type="text"], .sg-program-form-box input[type="email"], .sg-program-form-box input[type="tel"], .sg-program-form-box select, .sg-program-form-box textarea{ color: #35124F !important; background: #FFFFFF !important; border: 1px solid rgba(91,44,131,.18) !important; box-shadow: inset 0 1px 2px rgba(53,18,79,.03) !important; } /* ============================================================ PLACEHOLDERS ============================================================ */ .sg-program-form-box input::placeholder, .sg-program-form-box textarea::placeholder{ color: #8B8091 !important; opacity: 1 !important; } /* ============================================================ FOCUS DE CAMPOS ============================================================ */ .sg-program-form-box .elementor-field:focus, .sg-program-form-box input:focus, .sg-program-form-box select:focus, .sg-program-form-box textarea:focus{ background: #FFFFFF !important; border-color: #F4C430 !important; box-shadow: 0 0 0 4px rgba(244,196,48,.16), 0 7px 22px rgba(53,18,79,.09) !important; } /* ============================================================ BOTÓN ============================================================ */ .sg-program-form-box .elementor-button, .sg-program-form-box button[type="submit"]{ color: #35124F !important; background: linear-gradient( 135deg, #FFD84A 0%, #F4C430 100% ) !important; border: 1px solid rgba(255,255,255,.24) !important; box-shadow: 0 13px 28px rgba(244,196,48,.24) !important; } /* ============================================================ HOVER DEL BOTÓN ============================================================ */ .sg-program-form-box .elementor-button:hover, .sg-program-form-box button[type="submit"]:hover{ color: #FFFFFF !important; background: linear-gradient( 135deg, #C62828, #941B1B ) !important; box-shadow: 0 18px 36px rgba(148,27,27,.35) !important; transform: translateY(-3px); } /* ============================================================ MENSAJES DEL FORMULARIO ============================================================ */ .sg-program-form-box .elementor-message{ color: #FFFFFF !important; background: rgba(255,216,74,.10) !important; border: 1px solid rgba(255,216,74,.22) !important; } /* ============================================================ ERROR ============================================================ */ .sg-program-form-box .elementor-message-danger, .sg-program-form-box .elementor-message-error{ color: #FFFFFF !important; background: rgba(198,40,40,.18) !important; border-color: rgba(198,40,40,.38) !important; } /* ============================================================ ÉXITO ============================================================ */ .sg-program-form-box .elementor-message-success{ color: #35124F !important; background: #FFD84A !important; border-color: #F4C430 !important; } /* ============================================================ SELECT ============================================================ */ .sg-program-form-box select{ color: #35124F !important; background-color: #FFFFFF !important; } /* ============================================================ OPCIONES DEL SELECT ============================================================ */ .sg-program-form-box select option{ color: #35124F !important; background: #FFFFFF !important; } /* ============================================================ MÓVIL ============================================================ */ @media(max-width:800px){ .sg-program-form{ background: linear-gradient( rgba(255,255,255,.02) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.02) 1px, transparent 1px ), radial-gradient( circle at 95% 8%, rgba(255,216,74,.13), transparent 24% ), radial-gradient( circle at 5% 95%, rgba(198,40,40,.09), transparent 25% ), linear-gradient( 160deg, #5B2C83 0%, #35124F 55%, #280B3A 100% ) !important; } }/* End custom CSS */