:root {
    /*color variables*/
    --color-midnight: #0D1F2C;
    --color-midnight-dark: #040D13;
    --color-midnight-accent: #18374D;
    --color-midnight-soft: #122A3B;
    --color-teal: #59B7B3;
    --color-teal-dark: #24827E;
    --color-teal-soft: #76E0DB;
    --color-text-gray: #505050;
    --color-pear: #f1f1f3;
    --color-platinum: #A0A2A3;
    --color-white: #ffffff;

    --color-red: #ef4444;



    /*form variables*/
    --form-bg: #0f0f11;
    --form-surface: rgba(255, 255, 255, 0.08);
    --form-border: none;
    --form-border-hover: #4b4b5a;
    --form-text: #ffffff;
    --form-text-muted: #9ca3af;
    --form-placeholder: #A0A2A3;
    --form-accent: #59B7B3;
    --form-accent-hover: #18374D;
    --form-accent-focus: #18374D;
    --form-invalid: #ef4444;
    --form-invalid-bg: rgba(239, 68, 68, 0.1);
    --form-valid: #22c55e;
    --form-disabled-bg: #151519;
    --form-disabled-text: #52525b;
    --form-radius: 5px;
    --form-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero {
  background: radial-gradient(50% 50% at 50% 50%, rgba(13, 31, 44, 0.98) 18.35%, rgba(13, 31, 44, 0.96) 100%);

}


.elementor-button,
.wpcf7-submit {
    clip-path: polygon(0% 0%, 0% 100%, 40% 100%,50% 90%,60% 100%, 100% 100%, 100% 0%, 60% 0%, 50% 10%, 40% 0%);
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    text-transform: uppercase;
    border-radius: 0;
    transition: all .3s ;
}

.elementor-button:hover,
.wpcf7-submit:hover {
    clip-path: polygon(0% 0%, 0% 100%, 40% 100%,50% 100%,60% 100%, 100% 100%, 100% 0%, 60% 0%, 50% 0%, 40% 0%);
}

a {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    
}



.elementor-pagination {
    display: flex;
    justify-content: center;
}

.elementor-pagination .page-numbers{
    padding: 11px 15px;
    border-radius: 2px;
    background: var(--color-midnight-accent);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    width: 44px;
    height: 44px;
    text-wrap: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
}

.elementor-pagination .page-numbers:not(.current):not(.prev):not(.next):hover{
    color: var(--color-midnight);
    background: var(--color-teal-soft);
    
}

.elementor-pagination .page-numbers.current{
    color: var(--color-midnight);
    background: var(--color-teal-soft);
     width: 44px;
    height: 44px;
    text-wrap: nowrap;
    
}
.elementor-pagination a.page-numbers.prev,
.elementor-pagination a.page-numbers.next,
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next  {
    border: none;
    background: none;
    color: var(--color-teal-soft);
}

.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next  {
    color: var(--color-teal);
}


@media (max-width: 767px) {
    .elementor-pagination .page-numbers,
    .elementor-pagination .page-numbers.current{
        padding: 6px 8px!important;
        font-size: 12px !important;
        width: 36px !important;
        height: 36px !important;
        
    }
}

@media (min-width: 768px) {
    .elementor-pagination .page-numbers.prev {
        margin-right: 30px !important;
    }
    .elementor-pagination .page-numbers.next {
        margin-left: 30px !important;
    }
}

/*
* Forms
*/


/* =========================================
   LABELS
   ========================================= */
label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--form-text);
}

label[for] {
  cursor: pointer;
}

/* =========================================
   INPUTS, TEXTAREA & SELECT
   ========================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--form-surface);
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius);
  color: var(--form-text);
  font-size: 0.95rem;
  transition: var(--form-transition);
  appearance: none;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--form-border-hover);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 1px var(--form-accent-focus);
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

/* Select con flecha personalizada */
select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7.4L0 1.4L1.4 0L6 4.6L10.6 0L12 1.4L6 7.4Z' fill='%2376E0DB'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

select option {
  background-color: var(--color-midnight) !important;
  color: var(--form-text);
  padding: 0.5rem;
}

/* =========================================
   CHECKBOX & RADIO
   ========================================= */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  accent-color: var(--form-accent);
  cursor: pointer;
  vertical-align: middle;
}

/* =========================================
   RANGE SLIDER
   ========================================= */
input[type="range"] {
  width: 100%;
  height: 6px;
  background: var(--form-border);
  border-radius: 3px;
  outline: none;
  appearance: none;
  cursor: pointer;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--form-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--form-surface);
  transition: transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--form-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--form-surface);
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.15);
}

/* =========================================
   FILE INPUT
   ========================================= */
input[type="file"] {
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--form-text-muted);
}

input[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  background-color: var(--form-surface);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--form-transition);
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--form-border);
  color: var(--form-text);
}

/* =========================================
   BOTONES
   ========================================= */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  padding: 0.75rem 1.5rem;
  background-color: var(--form-accent);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--form-radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--form-transition);
  line-height: 1.2;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--form-accent-hover);
  transform: translateY(-1px);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(0);
}

/* Variante secundaria (agrega class="secondary" al HTML) */
button.secondary,
input[type="reset"] {
  background-color: transparent;
  border-color: var(--form-border);
  color: var(--form-text);
}

button.secondary:hover,
input[type="reset"]:hover {
  background-color: var(--form-surface);
  border-color: var(--form-border-hover);
  color: var(--form-text);
}

/* =========================================
   FIELDSET & LEGEND
   ========================================= */
fieldset {
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

legend {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--form-text);
}

/* =========================================
   ESTADOS & VALIDACIÓN
   ========================================= */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  background-color: var(--form-disabled-bg);
  color: var(--form-disabled-text);
  border-color: var(--form-border);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Validación visual moderna (solo tras interacción) */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: var(--form-invalid);
  background-color: var(--form-invalid-bg);
}

input:user-valid,
textarea:user-valid,
select:user-valid {
  border-color: var(--form-valid);
}

/* =========================================
   SCROLLBAR (Textarea & Select)
   ========================================= */
textarea::-webkit-scrollbar,
select::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

textarea::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
  background: var(--form-surface);
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb {
  background: var(--form-border-hover);
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover,
select::-webkit-scrollbar-thumb:hover {
  background: var(--form-text-muted);
}



/*
* FORMS filter
*/

/* Search field */
.wpc-search-icon:before {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%2376E0DB' d='m19.6 21-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.887T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5a6.1 6.1 0 0 1-1.3 3.8l6.3 6.3zM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5t-1.312-3.187T9.5 5 6.313 6.313 5 9.5t1.313 3.188T9.5 14'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
}

.wpc-filters-date-range-column .hasDatepicker,
.wpc-filters-date-range-column .wpc-filters-range-from,
.wpc-filters-date-range-column .wpc-filters-range-to {
    
    
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxOCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMjBDMS40NSAyMCAwLjk3OTE2NyAxOS44MDQyIDAuNTg3NSAxOS40MTI1QzAuMTk1ODMzIDE5LjAyMDggMCAxOC41NSAwIDE4VjRDMCAzLjQ1IDAuMTk1ODMzIDIuOTc5MTcgMC41ODc1IDIuNTg3NUMwLjk3OTE2NyAyLjE5NTgzIDEuNDUgMiAyIDJIM1YwSDVWMkgxM1YwSDE1VjJIMTZDMTYuNTUgMiAxNy4wMjA4IDIuMTk1ODMgMTcuNDEyNSAyLjU4NzVDMTcuODA0MiAyLjk3OTE3IDE4IDMuNDUgMTggNFYxOEMxOCAxOC41NSAxNy44MDQyIDE5LjAyMDggMTcuNDEyNSAxOS40MTI1QzE3LjAyMDggMTkuODA0MiAxNi41NSAyMCAxNiAyMEgyWk0yIDE4SDE2VjhIMlYxOFpNMiA2SDE2VjRIMlY2WiIgZmlsbD0iIzU5QjdCMyIvPgo8L3N2Zz4K");

    background-size: 18px;
    background-repeat: no-repeat;
    background-position-x: 96%;
    background-position-y: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
   
    

}

/*
* Datepicker (jQuery UI) - Custom styles to match the theme's design. Adjusts colors, borders, and hover states for a cohesive look with the rest of the site.
*/


#ui-datepicker-div.ui-widget-content {
    border: 1px solid var(--color-midnight-accent) !important;
    background: var(--color-midnight-soft) !important;
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-highlight a,#ui-datepicker-div .ui-widget-header .ui-state-highlight a,#ui-datepicker-div.ui-widget-content .ui-state-highlight a,#ui-datepicker-div.ui-widget-content a {
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-widget-header {
    border: 1px solid var(--color-midnight-accent) !important;
    background:  var(--color-midnight-soft) !important;
    color: var(--color-white) !important;
    background: var(--color-midnight-soft) !important;
  
}

#ui-datepicker-div .ui-widget-header a {
    color: var(--color-white);
}

#ui-datepicker-div .ui-state-default,#ui-datepicker-div .ui-widget-header .ui-state-default,#ui-datepicker-div.ui-widget-content .ui-state-default {
    border: 1px solid var(--color-midnight-accent) !important;
    background: var(--color-midnight-accent) !important;
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-default a,#ui-datepicker-div .ui-state-default a:link,#ui-datepicker-div .ui-state-default a:visited {
    color: var(--color-teal) !important;
}

#ui-datepicker-div .ui-state-focus,#ui-datepicker-div .ui-state-hover,#ui-datepicker-div .ui-widget-header .ui-state-focus,#ui-datepicker-div .ui-widget-header .ui-state-hover,#ui-datepicker-div.ui-widget-content .ui-state-focus,#ui-datepicker-div.ui-widget-content .ui-state-hover {
    border: 1px solid var(--color-teal) !important;
    background: var(--color-teal) !important;
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-active a,#ui-datepicker-div .ui-state-active a:link,#ui-datepicker-div .ui-state-active a:visited,#ui-datepicker-div .ui-state-focus a,#ui-datepicker-div .ui-state-focus a:hover,#ui-datepicker-div .ui-state-focus a:link,#ui-datepicker-div .ui-state-focus a:visited,#ui-datepicker-div .ui-state-hover a,#ui-datepicker-div .ui-state-hover a:hover,#ui-datepicker-div .ui-state-hover a:link,#ui-datepicker-div .ui-state-hover a:visited {
    color: var(--color-white) !important;
    text-decoration: none
}

#ui-datepicker-div .ui-state-active,#ui-datepicker-div .ui-widget-header .ui-state-active,#ui-datepicker-div.ui-widget-content .ui-state-active {
    border: 1px solid var(--color-teal) !important;
    background: var(--color-teal) !important;
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-highlight,#ui-datepicker-div .ui-widget-header .ui-state-highlight,#ui-datepicker-div.ui-widget-content .ui-state-highlight {
    border: 1px solid var(--color-teal-soft) !important;
    background: var(--color-teal-soft) !important;
    color: var(--color-midnight)  !important;
}

#ui-datepicker-div .ui-state-error,#ui-datepicker-div .ui-widget-header .ui-state-error,#ui-datepicker-div.ui-widget-content .ui-state-error {
    border: 1px solid var(--color-red) !important;
    background: var(--color-red) !important;
    color: var(--color-white) !important;
}

#ui-datepicker-div .ui-state-error a,#ui-datepicker-div .ui-state-error-text,#ui-datepicker-div .ui-widget-header .ui-state-error a,#ui-datepicker-div .ui-widget-header .ui-state-error-text,#ui-datepicker-div.ui-widget-content .ui-state-error a,#ui-datepicker-div.ui-widget-content .ui-state-error-text {
    color: var(--color-white) !important;
}

.ui-datepicker.wpc-filter-datepicker .ui-datepicker-title select, .ui-datepicker.wpc-filter-datepicker select {
    
    color: var(--color-white) !important; 
    border-color: var(--color-midnight-accent) !important;
    
}

#ui-datepicker-div.wpc-filter-datepicker .ui-state-hover, #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-hover, #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-hover, #ui-datepicker-div.wpc-filter-datepicker .ui-state-focus, #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-focus, #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-focus {
    opacity: 1 !important;
}