/* 
Theme Name: Devoradores Catering
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


:root {
    --breakpoint-xs: 448px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1440px;
    --breakpoint-uxl: 1600px;
    --breakpoint-uxxl: 1920px;
    --breakpoint-max-sm: 575.98px;
    --breakpoint-max-md: 767.98px;
    --breakpoint-max-lg: 1023.98px;
    --breakpoint-max-xl: 1199.98px;
    --breakpoint-max-xxl: 1439.98px;
    --breakpoint-max-uxl: 1599.98px;
    --container-max-width-sm: 516px;
    --container-max-width-md: 708px;
    --container-max-width-lg: 964px;
    --container-max-width-xl: 1140px;
    --container-max-width-xxl: 1282px;
    --container-max-width-uxl: 1520px;
    --container-max-width-uxxl: 1520px;
    --container-width: calc((100vw) - (var(--padding-size-container) *2))
}

@media screen and (min-width: 448px) {
    :root {
        --container-width:calc(100vw - (var(--padding-size-container) * 2))
    }
}

@media screen and (min-width: 576px) {
    :root {
        --container-width:calc(100vw - (var(--padding-size-container) * 2))
    }
}

@media screen and (min-width: 768px) {
    :root {
        --container-width:calc(100vw - (var(--padding-size-container) * 2))
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --container-width:var(--container-max-width-lg)
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --container-width:var(--container-max-width-xl)
    }
}

@media screen and (min-width: 1440px) {
    :root {
        --container-width:var(--container-max-width-xxl)
    }
}

@media screen and (min-width: 1600px) {
    :root {
        --container-width:var(--container-max-width-uxl)
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --container-width:var(--container-max-width-uxxl)
    }
}

/*:root {
    --grid-columns: 12;
    --grid-gap: 2.5rem;
    --gap-width: calc(var(--grid-gap) * (var(--grid-columns) - 1));
    --column-width: calc((var(--container-width) - var(--gap-width)) / var(--grid-columns));
    --container-margin: calc(((100%) - var(--container-width)) / 2);
    --padding-size-container: 30px
}

@media screen and (max-width: 1199.98px) {
    :root {
        --grid-columns:10;
        --size-11: var(--container-width)
    }
}

@media screen and (max-width: 1023.98px) {
    :root {
        --grid-columns:6;
        --grid-gap: 2rem;
        --size-7: var(--container-width);
        --size-8: var(--container-width);
        --size-9: var(--container-width);
        --size-10: var(--container-width);
        --size-11: var(--container-width)
    }
}

@media screen and (max-width: 767.98px) {
    :root {
        --grid-columns:4;
        --grid-gap: 1.75rem;
        --size-5: var(--container-width);
        --size-6: var(--container-width);
        --size-7: var(--container-width);
        --size-8: var(--container-width);
        --size-9: var(--container-width);
        --size-10: var(--container-width);
        --size-11: var(--container-width)
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns),1fr);
    -webkit-column-gap: var(--grid-gap);
    -moz-column-gap: var(--grid-gap);
    column-gap: var(--grid-gap);
    grid-column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    grid-row-gap: var(--grid-gap)
}

.grid-12 {
    grid-template-columns: repeat(12,1fr)
}

.grid-11 {
    grid-template-columns: repeat(11,1fr)
}

.grid-10 {
    grid-template-columns: repeat(10,1fr)
}

.grid-9 {
    grid-template-columns: repeat(9,1fr)
}

.grid-8 {
    grid-template-columns: repeat(8,1fr)
}

.grid-7 {
    grid-template-columns: repeat(7,1fr)
}

.grid-6 {
    grid-template-columns: repeat(6,1fr)
}

.grid-5 {
    grid-template-columns: repeat(5,1fr)
}

.grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.grid-3 {
    grid-template-columns: repeat(3,1fr)
}

.grid-2 {
    grid-template-columns: repeat(2,1fr)
}

.grid-1 {
    grid-template-columns: 1fr
}



:root {
    --size-quarter: calc(var(--column-width) / 4);
    --size-third: calc(var(--column-width) / 3);
    --size-half: calc(var(--column-width) / 2);
    --size-1: var(--column-width);
    --size-2: calc((var(--column-width) * 2) + (var(--grid-gap) * 1));
    --size-3: calc((var(--column-width) * 3) + (var(--grid-gap) * 2));
    --size-4: calc((var(--column-width) * 4) + (var(--grid-gap) * 3));
    --size-5: calc((var(--column-width) * 5) + (var(--grid-gap) * 4));
    --size-6: calc((var(--column-width) * 6) + (var(--grid-gap) * 5));
    --size-7: calc((var(--column-width) * 7) + (var(--grid-gap) * 6));
    --size-8: calc((var(--column-width) * 8) + (var(--grid-gap) * 7));
    --size-9: calc((var(--column-width) * 9) + (var(--grid-gap) * 8));
    --size-10: calc((var(--column-width) * 10) + (var(--grid-gap) * 9));
    --size-11: calc((var(--column-width) * 11) + (var(--grid-gap) * 10));
    --size-12: var(--container-width);
    --size-container: var(--container-width)
}

.size-container {
    width: var(--size-container);
    max-width: var(--size-container)
}*/


:root {
    --font-size-root: 16px;
    --font-size-paragraph-normal: 1.125rem;
    --letter-space-paragraph-normal: -1px;
    --font-size-paragraph-small: 1rem;
    --font-size-paragraph-xsmall: 0.85rem;
    --font-size-h1: 3rem;
    --letter-space-h1: -4px;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height-paragraph-normal: 1.56;
    --line-height-paragraph-small: 1.5;
    --line-height-paragraph-xsmall: 1.57;
    --line-height-h1: 1.29;
    --line-height-h2: 1.38;
    --line-height-h3: 1.33;
    --font-weight-base: 400;
    --font-weight-bold: 700;
    --step-size-xs: 0.25rem;
    --step-size-sm: 0.5rem;
    --step-size-md: 0.75rem;
    --step-size-base: 1rem;
    --step-size-lg: 1.125rem;
    --step-size-xl: 1.75rem;
    --step-size-xxl: 1.875rem;
    --step-size-uxl: 2rem;
    --block-spacer-xs: 1.875rem;
    --block-spacer-sm: 3.75rem;
    --block-spacer-md: 4.69rem;
    --block-spacer-lg: 6.25rem;
    --block-spacer-xl: 7.5rem;
    --border-thinner: 1px;
    --border-thin: 2px;
    --border-thick: 4px;
    --border-radius-xs: 0.125rem;
    --border-radius-sm: 0.25rem;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-base: 1rem;
    --border-radius-lg: 1.5rem;
    --border-radius-full: 100%;
    --color-black: #000;
    --color-white: #fff;
    --color-dark-transparent-50: rgba(0,0,0,0.5);
    --color-light-transparent-50: hsla(0,0%,100%,0.5);
    --color-font-headings: #1e1e1e;
    --color-font-paragraphs: #888;
    --color-background: #fcfaf9;
    --color-details: #f5efeb;
    --color-red: #e60d2e;
    --color-background-modal: #0655c3;
    --color-neutral-100: #1e1e1e;
    --color-neutral-80: #4b4b4b;
    --color-neutral-60: #888;
    --color-neutral-40: #a5a5a5;
    --color-neutral-20: #d2d2d2;
    --color-neutral-00: #fff;
    --color-success-medium: #50a33d;
    --color-success-light: #9bce8d;
    --color-warning-medium: #f39b08;
    --color-warning-light: #ffca72;
    --color-error-medium: red;
    --color-error-light: #ff8989;
    --transition-ultrafast: 100ms;
    --transition-fast: 200ms;
    --transition-base: 300ms;
    --transition-slow: 400ms;
    --transition-ultra-slow: 600ms;
    --transition-linear: linear;
    --transition-easing: cubic-bezier(0.165,0.84,0.44,1);
    --body-z-index: 100;
    --menu-z-index: 500;
    --modal-z-index: 1000
}

:root {
    --font-family-base: "Funnel Display";

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-paragraphs)
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1)
}

h1,h2 {
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-headings)
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2)
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3)
}

h3,h4 {
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-headings)
}

h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4)
}

/*p {
    font-family: var(--font-family-base),sans-serif;
    color: var(--color-font-paragraphs)
}

p,p.is--small {
    font-size: var(--font-size-paragraph-small);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-paragraph-small)
}

p.is--bold {
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-bold)
}*/

body {
    position: relative;
    background-color: var(--color-background)
}

body * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a {
    color: inherit
}

.link-wrapper,a {
    text-decoration: none
}

.link-wrapper {
    display: block;
    height: inherit
}

.link-wrapper.--is-dissabled {
    pointer-events: none
}

.background-image {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

@media (min-width: 1024px) {
    [data-animation=from-bot] {
        opacity:0;
        -webkit-transform: translateY(90px);
        -o-transform: translateY(90px);
        transform: translateY(90px)
    }

    [data-animation=fade] {
        opacity: 0
    }
}

* {
    -webkit-tap-highlight-color: transparent
}

.--is-bold {
    font-weight: var(--font-weight-bold)
}

.--is-invisible {
    display: none!important
}

.--is-hidden {
    visibility: hidden
}

.no-padding-top {
    padding-top: 0!important
}

.no-padding-bottom {
    padding-bottom: 0!important
}

.no-padding {
    padding: 0!important
}

.click-trigger,.click-trigger * {
    cursor: pointer
}

.is--hidden-mobile {
    display: block
}

.is--hidden-desktop {
    display: none
}



:root {
    --font-size-paragraph-normal: 1.125rem;
    --letter-space-paragraph-normal: -1px;
    --block-spacer-sides: 20px;
    /*--container-width: min(1282px, var(--container-width))!important;*/
}


nav .disabled > a{
    pointer-events: none;
/*    color: #bbb!important;
    fill: #bbb!important;;*/
}

nav .bold > a {
    font-weight: bold!important;
}

#panel-servicios .current-menu-item a, footer .current-menu-item a {
    color: #0a4f48!important;
    background: #b9b9b954;
    border-radius: 50px;
}

.abrir-panel > a::after {
  content: "▾"; /* símbolo de chevron hacia abajo */
  font-size: 0.8em;
  right: -0.8em;
  transition: transform 0.3s ease;
  opacity: 1!important;
}

/* Cuando el panel está activo, rota el chevron */
.abrir-panel > a.activo::after {
  transform: rotate(180deg); /* apunta hacia arriba */
}


/*.slide-top {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}*/

/* ----------------------------------------------
 * Generated by Animista on 2025-11-27 18:29:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
/*@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}*/


@media (max-width: 480px){
    :root {
        --letter-space-h1: -2.5px;
        /*--font-size-subtitulo-normal: 20px;*/
    }
}


.mt-sep-sm {
    margin-top: .75em;
}
/* desactiva las animaciones de elementor si el sistema lo indica */

@media (prefers-reduced-motion: reduce) {
  .elementor-invisible {
    visibility: visible !important;
  }
  .elementor-animated-item {
    animation: none !important;
    transition: none !important;
  }
}

/***Menu escritorio no javascript***/
#menu-servicios {
  position: absolute;
  top: 0px;
  left: -100px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

#lnk-servicios:hover #menu-servicios,
#lnk-servicios:focus-within #menu-servicios {
  opacity: 1;
  visibility: visible;
  transform: translateY(78px)!important;
}

/***Menu móvil no javascript***/

#menumovil {
	display: none;
	background: #F7F4ED;
	position: fixed; 
	top:0;
	left: 0;
	height: 100vh;
	width: 100%;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 999;
}
#menumovil > div {
    display: flex;
        flex-direction: column;
}
#menumovil:target {
    display: flex!important;
	transform: translateX(0);
	
}
#menumovil ul,
#menumovil li {
    margin-left: 0;
    padding-left: 0;
}
#menumovil ul.menu {
    padding: 0 0 0 0;
	margin: 0 0 0 0;
    list-style: none;
    display:block;
	width: 100%;
}
#menumovil ul.menu li {
    margin: 20px 0;
}
#menumovil ul.menu a {
    color: #366E72;
/*    padding-top: 0.5em;
    padding-bottom: 0.5em;*/
    font-weight: 800;
	font-size: clamp(1.25rem, 0.655rem + 2.976vw, 2.5rem);
	font-family: Funnel Display, Sans-serif;
    text-transform: uppercase; 	
}
#menumovil ul.menu li ul.sub-menu a{
    text-transform: none; 
}

#menumovil ul.menu input[type=checkbox] ul.sub-menu a,#menumovil ul.sub-menu a {
	font-weight: 500;
}
#menumovil ul.menu li ul.sub-menu {
  padding: 0 0 0 10px;
    max-height: 0;
  overflow-y: hidden;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
     list-style: none;
}
#menumovil ul.menu input[type=checkbox]:hover ul.sub-menu {
      max-height: none;
  transition: max-height 1.8s linear;
}
#menumovil label input[type="checkbox"]:checked ~ ul.sub-menu {
    max-height: none;
    transition: max-height 1.8s linear;
}
#menumovil label input[type="checkbox"] {
    display: none;
}
#menumovil label input[type="checkbox"].menu-item-has-children + .enlacemenu a {
	pointer-events: auto !important;
    display: inline-block;
}
#menumovil label .enlacemenu {
    cursor: pointer;
}
#menumovil label {
	display: block;
	width: 100%;
}
#menumovil label > ul.sub-menu {
	width: 100%;
}
/* nuevo */
/* 1. Si el enlace es un '#' (clase no-click), hacemos que el clic lo atraviese */
#menumovil label input[type="checkbox"].menu-item-has-children + .enlacemenu a.no-click {
    pointer-events: none!important; /* El clic pasa al label */
    display: inline-block;
}

#menumovil .enlacemenu a.no-click:after {
	content: ''!important;
	display: none!important;
}

/* 2. Si el enlace es real, el toggle absoluto se encarga del checkbox */
#menumovil .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    z-index: 10; /* Por encima del enlace */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Aseguramos que el label tenga el tamaño correcto para capturar clics */
#menumovil label {
    display: block;
    width: 100%;
    position: relative;
}

/* 4. Estilo para el icono cuando el enlace es # */
#menumovil .icon-only {
    pointer-events: none;
    content:"▾";
	font-size: 1.5em;
    line-height: 1;
    display: inline-block;
    margin-left: 10px;
    padding: 2px 4px;
    /*background: #0a4f48;*/
    color: #0a4f48;
    border-radius: 6px;
}

/* 5. Animación de los iconos al abrir */
#menumovil input[type="checkbox"]:checked + .enlacemenu .submenu-toggle:after,
#menumovil input[type="checkbox"]:checked + .enlacemenu .icon-only {
    transform: rotate(180deg);
}

/*
nav:has(#menumovil:target){
   opacity: 1;
   visibility: visible;
}
nav:has(.not(#menumovil:target)){
   opacity: 1;
   visibility: hidden;
}*/