/*
Theme Name: DentCo Theme
Theme URI: https://www.behance.net/alvarodonders
Description: Tema para Clinica dental DentCo 2026
Date: Enero 2026
Author: Alvaro Donders
Author URI: https://www.behance.net/alvarodonders
Version: 1.0
*/

/* CORE THEME BASE RESET */

/****************************************
Reset
*****************************************/

/* Box sizing rules */

*,
*::before,
*::after {
    -webkit-text-decoration: none;
    text-decoration: none;
    box-sizing: border-box;
    box-sizing: border-box;
    scroll-margin-top: 0;
}

/* Remove default margin */

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul, ul[role='list'],
ol, ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

html, body{
    height: 100%;
}

/* Set core body defaults */

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles
a:not([class]) {
  font-size: inherit;
  color: inherit;
  text-decoration-skip-ink: auto;
}
*/

/* Make images easier to work with */

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

iframe {
  border: none;
}

li {
  list-style: none;
}

a {
  font-size: inherit;
  color: inherit;
}

a:hover {
  transition: 0.3s;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* BASE LAYOUT HELPERS */

/****************************************
Layout Tag & Token Helpers
*****************************************/

/**SCREEN SIZES & MEDIA QUERIES**/

/* 432px - @$xs */

/* 640px - @$sm */

/* 768px - @$md */

/* 992px - @$lg */

/* 1280px - @$xl */

/* 1440px - @$xxl */

/**SCREENS TO VARS**/

/**COLOR SCHEMES**/

/* @$dark */

/* @$light */

/*Colors*/

/*Displays, Positions, Aligns*/

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-iblock {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

.d-grid {
    display: grid !important;
}

.pos-a {
    position: absolute !important;
}

.pos-rel {
    position: relative !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

/*Size Helpers*/

.w100 {
    width: 100% !important;
}

.h100 {
    height: 100% !important;
}

.s100 {
    width: 100% !important;
    height: 100% !important;
}

/*Text Helpers*/

.tac {
    text-align: center !important;
}

.tal {
    text-align: left !important;
}

.tar {
    text-align: right !important;
}

.lspace1 {
    letter-spacing: 1px !important;
}

.lspace2 {
    letter-spacing: 2px !important;
}

/*ALIGN HELPERS*/

/*Spacing Helpers*/

.m-0 {
    margin: 0 !important;
}

.m-025 {
    margin: 0.25rem !important;
}

.m-05 {
    margin: 0.5rem !important;
}

.m-1 {
    margin: 1rem !important;
}

.m-15 {
    margin: 1.5rem !important;
}

.m-2 {
    margin: 2rem !important;
}

.m-25 {
    margin: 2.5rem !important;
}

.m-3 {
    margin: 3rem !important;
}

.m-4 {
    margin: 4rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-025 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-05 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-1 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-15 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-2 {
    margin-right: 2rem !important;
    margin-left: 2rem !important;
}

.mx-25 {
    margin-right: 2.5rem !important;
    margin-left: 2.5rem !important;
}

.mx-3 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-4 {
    margin-right: 4rem !important;
    margin-left: 4rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-025 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-05 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-15 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-2 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.my-25 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.my-3 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-4 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-025 {
    margin-top: 0.25rem !important;
}

.mt-05 {
    margin-top: 0.5rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-15 {
    margin-top: 1.5rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-25 {
    margin-top: 2.5rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mt-4 {
    margin-top: 4rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-025 {
    margin-right: 0.25rem !important;
}

.mr-05 {
    margin-right: 0.5rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}

.mr-15 {
    margin-right: 1.5rem !important;
}

.mr-2 {
    margin-right: 2rem !important;
}

.mr-25 {
    margin-right: 2.5rem !important;
}

.mr-3 {
    margin-right: 3rem !important;
}

.mr-4 {
    margin-right: 4rem !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-025 {
    margin-bottom: 0.25rem !important;
}

.mb-05 {
    margin-bottom: 0.5rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-15 {
    margin-bottom: 1.5rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-25 {
    margin-bottom: 2.5rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.mb-4 {
    margin-bottom: 4rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-025 {
    margin-left: 0.25rem !important;
}

.ml-05 {
    margin-left: 0.5rem !important;
}

.ml-1 {
    margin-left: 1rem !important;
}

.ml-15 {
    margin-left: 1.5rem !important;
}

.ml-2 {
    margin-left: 2rem !important;
}

.ml-25 {
    margin-left: 2.5rem !important;
}

.ml-3 {
    margin-left: 3rem !important;
}

.ml-4 {
    margin-left: 4rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-025 {
    padding: 0.25rem !important;
}

.p-05 {
    padding: 0.5rem !important;
}

.p-1 {
    padding: 1rem !important;
}

.p-15 {
    padding: 1.5rem !important;
}

.p-2 {
    padding: 2rem !important;
}

.p-25 {
    padding: 2.5rem !important;
}

.p-3 {
    padding: 3rem !important;
}

.p-4 {
    padding: 4rem !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-025 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-05 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-1 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-15 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-2 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.px-25 {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
}

.px-3 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.px-4 {
    padding-right: 4rem !important;
    padding-left: 4rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-025 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-05 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-15 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.py-25 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.py-3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.py-4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-025 {
    padding-top: 0.25rem !important;
}

.pt-05 {
    padding-top: 0.5rem !important;
}

.pt-1 {
    padding-top: 1rem !important;
}

.pt-15 {
    padding-top: 1.5rem !important;
}

.pt-2 {
    padding-top: 2rem !important;
}

.pt-25 {
    padding-top: 2.5rem !important;
}

.pt-3 {
    padding-top: 3rem !important;
}

.pt-4 {
    padding-top: 4rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-025 {
    padding-right: 0.25rem !important;
}

.pr-05 {
    padding-right: 0.5rem !important;
}

.pr-1 {
    padding-right: 1rem !important;
}

.pr-15 {
    padding-right: 1.5rem !important;
}

.pr-2 {
    padding-right: 2rem !important;
}

.pr-25 {
    padding-right: 2.5rem !important;
}

.pr-3 {
    padding-right: 3rem !important;
}

.pr-4 {
    padding-right: 4rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-025 {
    padding-bottom: 0.25rem !important;
}

.pb-05 {
    padding-bottom: 0.5rem !important;
}

.pb-1 {
    padding-bottom: 1rem !important;
}

.pb-15 {
    padding-bottom: 1.5rem !important;
}

.pb-2 {
    padding-bottom: 2rem !important;
}

.pb-25 {
    padding-bottom: 2.5rem !important;
}

.pb-3 {
    padding-bottom: 3rem !important;
}

.pb-4 {
    padding-bottom: 4rem !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-025 {
    padding-left: 0.25rem !important;
}

.pl-05 {
    padding-left: 0.5rem !important;
}

.pl-1 {
    padding-left: 1rem !important;
}

.pl-2 {
    padding-left: 2rem !important;
}

.pl-25 {
    padding-left: 2.5rem !important;
}

.pl-3 {
    padding-left: 3rem !important;
}

.pl-4 {
    padding-left: 4rem !important;
}

/*Lists*/

ul.inline li{
    display: inline;
}

/*Radius*/

.round-radius{
    border-radius: 100vh;
    border-radius: 100dvh;
}

/*Icons*/

.icon-left{
    padding-right: .5rem;
}

.icon-right{
    padding-left: .5rem;
}

/*Flex Justify Align*/

.flex-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
}

.flex-between{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    text-align: center;
}

.flex-around{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    text-align: center;
}

.flex-evenly{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    text-align: center;
}

/*Cluster Object*/

.cluster{
    width: 100%;
    background-color: #999;
    min-height: 128px;
    text-align: center;
    color: #333;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    font-size: 2rem;
}

.text-bold{
    font-weight: 700!important;
}

.if-mobile{

}

.if-mobile-d-none{
    display: none;
}

.if-desktop-d-none{
    display: block;
}

.text-center{
    text-align: center;
}

/* THEME TOKENS SETTINGS */

/**************************************
* MAIN BODY STYLES / LAYOUT TOKENS
***************************************/

/*Colores principales*/

/*Tipografias*/

/*Links*/

/*Container*/

/*Grid*/

/*Section*/

/*Boxes*/

/*Footer*/

/* BASE LAYOUT CONTAINERS */

/****************************************
Main base Layout styles
*****************************************/

/*Body Structure*/

.wrapper{
    min-height:100vh;
    min-height:100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
    "header"
    "main"
    "footer";
}

.wrapper:has(.sidebar){
        height: inherit;
        position: relative;
        grid-template-columns: 1fr 3fr;
        grid-template-areas: 
          "header  header"
          "sidebar main"
          "footer  footer";
    }

@media (max-width: 991px) {
    .wrapper:has(.sidebar) {
      grid-template-columns: 4fr;
      grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
    }
}

/*Body*/

body {
    font-family: 'Manrope', sans-serif;
    width: 100%;
    height: 100%;
    font-size: 16px;
    overflow-x: hidden;
    color: #243436
}

/*Typogrpahy*/

p{
    line-height: 1.5;
    letter-spacing: 0.02rem;
}

h1,h2,h3,h4,h5,h6{
    line-height: 1.1;
    letter-spacing: 0.02rem;
}

h1{
    font-size: 3rem;
    font-weight: 900;
}

h2{
    font-size: 2.5rem;
    font-weight: 900;
}

h3{
    font-size: 2rem;
    font-weight: 900;
    color: #5C7072;
}

h4{
    font-size: 1.75rem;
    font-weight: 600;
}

h5{
    font-size: 1.5rem;
    font-weight: 600;
}

h6{
    font-size: 1.25rem;
    font-weight: 500;
}

::-moz-selection {
    color: white;
    background: #E54C78;
  }

::selection {
    color: white;
    background: #E54C78;
  }

/*Links*/

a {
    color: #102136;
  }

a:hover, a:focus {
color: #243436;
}

/*Areas*/

header, aside, main, section, article, footer{
    width: 100%;
    padding: 0;
    margin: 0px;
}

main{
    margin-top: 2rem;

}

main.home{
        margin-top: 0px;
    }

main#outlet{
        margin-top: 0px;
    }

section{
    padding: 0px 0px;
}

strong{
    font-weight: 600;
}

/****************************************
Container styles
*****************************************/

.container{
    width: 100%;
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.container-xs{
    width: 100%;
    max-width:480px;
    margin:auto;
}

.container-sm{
    width: 100%;
    max-width:640px;
    margin:auto;
}

.container-md{
    width: 100%;
    max-width:768px;
    margin:auto;
}

.container-lg{
    width: 100%;
    max-width:960px;
    margin:auto;
}

.container-xl{
    width: 100%;
    max-width:1140px;
    margin:auto;
}

.container-xxl{
    width: 100%;
    max-width:78rem;
    margin:auto;
}

.container-full{
    max-width:100%;
}

/*Grid Grid Setup*/

.grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
    gap: 1rem;        
}

.grid.auto{
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    }

.grid.auto > *{
        container-type:inline-size;
    }

.grid.cols-2{
    }

.grid.cols-3{
    }

.grid.cols-4{
    }

.grid.cols-5{
    }

.grid.cols-6{
    }

.grid.cols-7{
    }

.grid.cols-8{
    }

.grid.cols-9{
    }

.grid.cols-10{
    }

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

@media (min-width: 40em) {

    .grid.auto {
        grid-auto-flow: column;
    }
}

@media (min-width: 48em) {

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

@media (min-width: 40em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

@media (min-width: 40em) {

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

@media (min-width: 48em) {

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

@media (min-width: 62em) {

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

/*Flexbox Grid Setup*/

.flex-grid{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.flex-grid.auto > *{
        flex: 1 1 200px;
        container-type:inline-size;
    }

.even-flex{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
}

.even-flex > div{
    flex: 1;
}

/*Icons List*/

.nav-icons, .nav-social{
    flex-direction: row!important; 
}

.nav-icons, .nav-social{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem; 
}

.nav-icons a,.nav-social a{
        padding: 0!important;
    }

.nav-icons a,.nav-social a{
        font-size: 1rem;
    }

/*Embed Content*/

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container embed,
.embed-container iframe,
.embed-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* MIXINS */

/****************************************
Mixins
*****************************************/

/* @mixin FONT */

/* @mixin LINK */

/* @mixin BACKGROUND COLOR */

/* @mixin BACKGROUND IMAGE */

/* @mixin BORDER */

/* @mixin FLEXBOX */

/* @mixin GRID */

/* COMPONENTS */

/****************************************
Component: Animation
*****************************************/

/****************************************
Component: Buttons
*****************************************/

/*Button*/

.btn{
    display: inline-block;
    padding: 1rem 1.3rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    border-radius: 25px;
    background-color: white;
    color: #E54C78;
    cursor: pointer;
    transition: .3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;

}

.btn:hover{
        background-color: #E54C78;
        color: white;
    }

/*Button Sizes*/

.btn-small{
    font-size: 0.8rem;
}

.btn-medium{
    font-size: 1.2rem;
    padding: 1rem 1.2rem;
}

.btn-big{
    font-size: 1.5rem;
    padding: 1.2rem 1.5rem;
}

/*Button Color Styles*/

.btn-verde{
    background-color: #E54C78;
    color: white;
}

.btn-verde:hover{
        background-color: #243436;
        color: white;
    }

.btn-amarillo{
    background-color: #41B9C0;
    color: white;

}

.btn-amarillo:hover{
        background-color: #102136;
        color: white;
    }

.btn-reserva{
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    width: -moz-fit-content;
    width: fit-content;
    gap: 1rem;
    background-color: #fff;
    color: #E54C78;
    padding: 1.5rem 2.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius:100vw;

}

.btn-reserva i{
    font-size: 2.5rem;
    }

.btn-reserva .btn-title h2{
            font-size: 1.5rem;
            font-weight: 700;
        }

.btn-reserva .btn-title p{
            width: 100% !important;
        }

.btn-reserva .btn-title p{
            font-size: 1rem;
            font-weight: 400;
        }

.btn-reserva:hover{
        background-color: #E54C78;
        color:#fff;
    }

/****************************************
Component: Cards
*****************************************/

.card {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: space-between;
  text-align: center;
  min-height: 100%;
  align-items: center;
  width: 100%;
  border: 1px solid #e9e9e9;

}

.card_container{
    padding: 1rem;

}

.card_container .media{
        margin-bottom: 1rem;
    }

.card_container .media img{

        }

.card_container .info{
            margin-bottom: 1rem;

    }

.card_container .action{
            margin-bottom: 1rem;

    }

.card_container .meta{
        padding-top: .5rem;
        border-top: 1px solid #e9e9e9;
        font-size: 0.7rem;

    }

.card_container .meta .nav-icons{
        gap:.5rem;
        
        }

/****************************************
Component: Forms & Inputs
*****************************************/

.contact-form{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

}

.contact-form input[type=email], .contact-form input[type=text], .contact-form textarea{
        max-width: 100% !important;
        border: solid 1px #E54C78 !important;
    }

.contact-form button[type=submit]{
        display: flex !important;
        background-color: #E54C78 !important;
        padding: 1.2rem 2.2rem !important;
        border-radius: 100vw !important;
    }

.contact-form button[type=submit]{
        justify-content: center;
        align-items: center;        
        letter-spacing: 1px;
        margin-left: auto;
        margin-right: auto;
    }

.contact-form .wpforms-required-label{
        color: #41B9C0 !important;
    }

/*Searchbox*/

.search {
    top: 50%;
    left: 50%;
  }

.search * {
    outline: none;
    box-sizing: border-box;
  }

.search__wrapper {
    position: relative;
  }

.search__field {
    width: 2rem;
    height: 2rem;
    color: transparent;
    font-size: .9rem;
    padding: 0.35em 2rem 0.35em 0;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
  }

.search__field:focus {
    border-bottom-color: #ccc;
    width: 192px;
    color: #E54C78;
    cursor: default;
  }

.search__field:focus ~ .search__icon {
    background-color: transparent;
    cursor: pointer;
    pointer-events: auto;
    color: #E54C78;
  }

.search__icon {
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #E54C78;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    text-align: center;
    border-color: transparent;
    border-radius: 0.3125rem;
    pointer-events: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
  }

.search__field::-webkit-input-placeholder {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition-property: top, color;
    transition-property: top, color;
    transition-duration: 0.1s;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
  }

.search__field:-moz-placeholder {
    position: relative;
    top: 0;
    left: 0;
    -moz-transition-property: top, color;
    transition-property: top, color;
    transition-duration: 0.1s;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
  }

.search__field::-moz-placeholder {
    position: relative;
    top: 0;
    left: 0;
    -moz-transition-property: top, color;
    transition-property: top, color;
    transition-duration: 0.1s;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
  }

.search__field:-ms-input-placeholder {
    position: relative;
    top: 0;
    left: 0;
    -ms-transition-property: top, color;
    transition-property: top, color;
    transition-duration: 0.1s;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
  }

.search__field::-webkit-input-placeholder[style*=hidden] {
    visibility: visible !important;
  }

.search__field::-webkit-input-placeholder[style*=hidden] {
    color: #D9D9D9;
    font-size: 0.65em;
    font-weight: normal;
    top: -20px;
    opacity: 1;
  }

.search__field:-moz-placeholder[style*=hidden] {
    visibility: visible !important;
  }

.search__field:-moz-placeholder[style*=hidden] {
    color: #D9D9D9;
    font-size: 0.65em;
    font-weight: normal;
    top: -20px;
    opacity: 1;
  }

.search__field::-moz-placeholder[style*=hidden] {
    visibility: visible !important;
  }

.search__field::-moz-placeholder[style*=hidden] {
    color: #D9D9D9;
    font-size: 0.65em;
    font-weight: normal;
    top: -20px;
    opacity: 1;
  }

.search__field:-ms-input-placeholder[style*=hidden] {
    visibility: visible !important;
  }

.search__field:-ms-input-placeholder[style*=hidden] {
    color: #D9D9D9;
    font-size: 0.65em;
    font-weight: normal;
    top: -20px;
    opacity: 1;
  }

/****************************************
Component: Nav - Primary Navigation
*****************************************/

:root {
    --nav-color-1:#7b4bff;
    --nav-color-2:#ffffff;
    --nav-color-3:#333333;
    --nav-font:'Manrope', sans-serif;
}

/*main-nav*/

#top-nav{
        letter-spacing: 1px;
        font-size: 1rem;
        font-family:'Manrope', sans-serif;
        font-family:var(--nav-font);
    }

#top-nav .wide{
        margin-left: auto;
        margin-right: auto;
    }

/*Navs*/

#top-nav nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
        width: 100%;
        top: 0;
    }

#top-nav .logo{        
        z-index: 999;     
    }

#top-nav .logo img{
        height: 40px;        
    }

#top-nav nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

#top-nav .menu {
        vertical-align: top;
        display: flex;
    }

#top-nav .menu li {
        position: relative;
        display: block;
        align-self: center;
    }

#top-nav .menu a {
        display: block;
        position: relative;
        font-size: .7rem;
        padding: 1rem;
        text-transform: uppercase;
        font-weight: 600;

    }

#top-nav .menu ul a,
    #top-nav .menu ul ul a {
        font-size: .6rem;
    }

#top-nav .menu > li {
        float: left;
    }

#top-nav .menu > li:last-child {
        margin-right: 0;
    }

/*Submenus*/

#top-nav .menu ul {
        position: absolute;
        white-space: nowrap;
        z-index: 1;
        left: -99999em;
        opacity: 0;
        transition: 0.3s ease-in-out;
        transform: translateY(-10px);
        background-color: #ffffff;
    }

#top-nav .menu > li:hover > ul {
        left: auto;
        min-width: 100%;
        opacity: 1;
        transform: translateY(0px);
    }

#top-nav .menu > li li:hover > ul {
        left: 100%;
        top: 0;
        opacity: 1;
        transform: translateY(0px);
    }

#top-nav .menu ul .underline:before {
        background: none;
    }

/*Mobile menu showing submenus*/

#top-nav .mobile .menu li:hover ul li ul {
        position: absolute;
        left: 0;
    }

#top-nav .mobile .menu li ul li:hover ul,
    #top-nav .mobile .menu li:hover ul {
        position: relative;
    }

#top-nav .mobile .menu a.underline:before {
        background: none;
    }

/*Arrows*/

#top-nav .menu li a:first-child:nth-last-child(2):after {
        font-family: "FontAwesome";
        content: " \f107";
        padding-left: 5px;
    }

#top-nav .menu li li > a:first-child:nth-last-child(2):after {
        font-family: "FontAwesome";
        content: " \f105";
        right: 5px;
    }

/*Icons*/

#top-nav .mobile .menu .icons {
        display: flex;
    }

/*Butons*/

#top-nav .mobile .menu .btn {
        margin: 15px 0;
    }

#top-nav .wide .menu a.btn i {
        font-size: 14px;
    }

#top-nav .wide .menu a.icon {
        padding: 0 5px;
    }

/*Search*/

#top-nav .mobile form.flexbar input {
        margin-right: 15px;
    }

#top-nav .mobile form.flexbar i {
        justify-content: center;
        align-items: center;
    }

/*
    LEFT MENU Navbar component styles
    */

/*
    HOVERS
    */

/* Underline From Center */

.underline {
        display: inline-block;
        vertical-align: middle;
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
        overflow: hidden;
    }

.underline:before{
        content: "";
        position: absolute;
        z-index: -1;
        left: 51%;
        right: 51%;
        bottom: 0;
        background: #7b4bff;
        background: var(--nav-color-1);
        height: 3px;
        transition-property: left, right;
        transition-duration: 0.15s;
        transition-timing-function: ease-out;
    }

.underline:active:before,
    .underline:focus:before,
    .underline:hover:before {
        left: 0;
        right: 0;
    }

/*Hamburguer*/

.hamburger {
        padding: 15px;
        display: none;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
        z-index: 9999;
    }

.hamburger:hover {
        opacity: 0.7;
    }

.hamburger.is-active:hover {
        opacity: 0.7;
    }

.hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::after,
    .hamburger.is-active .hamburger-inner::before {
        background-color: #fff;
    }

.hamburger-box {
        display: flex;
        position: relative;
        width: 30px;
    }

.hamburger-inner {
        display: block;
        top: 50%;
        margin-top: -2px;
    }

.hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        width: 30px;
        height: 4px;
        background-color: #000;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

.hamburger-inner::after,
    .hamburger-inner::before {
        content: "";
        display: block;
    }

.hamburger-inner::before {
        top: -8px;
    }

.hamburger-inner::after {
        bottom: -8px;
    }

.hamburger--arrowturn.is-active .hamburger-inner {
        transform: rotate(-180deg);
    }

.hamburger--arrowturn.is-active .hamburger-inner::before {
        transform: translate3d(6px, 0, 0) rotate(45deg) scale(0.7, 1);
    }

.hamburger--arrowturn.is-active .hamburger-inner::after {
        transform: translate3d(6px, 0, 0) rotate(-45deg) scale(0.7, 1);
    }

.hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::after,
    .hamburger.is-active .hamburger-inner::before {
        background-color: #ffffff;
        background-color: var(--nav-color-2);
    }

.hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        background-color: #000;
    }

/*
    Wide Nav
    */

#top-nav .wide .wide-inner .header-menu ul.menu {
               
    }

#top-nav .wide .logo img{
       /* max-height:4em;*/
    }

#top-nav .menu .nav-icons{
        margin-left: 1em;
    }

#top-nav .wide .menu i {
        font-size: 18px;
        padding: .3em;
    }

/*
    Mobile Nav
    */

#top-nav .mobile {
        display: none;
        justify-content: space-between;
        
    }

#top-nav .mobile .logo img {
        max-height: 40px;
        margin-left: 15px;
        padding: 0;
    }

#top-nav .mobile .hamburger ~ ul.menu {
        height: 100vh;
        width: 100%;
        position: fixed;
        transition: 0.3s;
        opacity: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        background-color: var(--nav-color-2);
        backdrop-filter: blur(2px);
    }

#top-nav .mobile .menu img.logo {
        height: 5em;
        z-index: 9;
        margin: 0;
    }

.hamburger:hover {
        opacity: 0.7;
    }

.hamburger.is-active:hover {
        opacity: 0.7;
    }

.hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        background-color: #000;
    }

.hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::after,
    .hamburger.is-active .hamburger-inner::before {
        background-color: #7b4bff;
        background-color: var(--nav-color-1);
    }

#top-nav .mobile .menu .nav-icons{
        margin: 0px;
    }

#top-nav .mobile .menu .nav-icons li{
        display: inline-block;
    }

/*
    Sticky Nav
    */

#top-nav .sticky {
        position: fixed;
        top: 0;
        z-index: 3;
        opacity: 0;
        transition: 0.3s ease-in-out;
        transform: translateY(-100px);
        max-width: 100%;
        justify-content: center;
        padding: 0.5em;
        background-color: #ffffff;
        background-color: var(--nav-color-2);
        /*background-color: hsla(0, 0%, 20%, 0.75);
        backdrop-filter: blur(2px);*/
    }

#top-nav .sticky .logo img {
        /*max-height: 50px;*/
    }

#top-nav .sticky .menu{
        margin-left: 3em;
        
    }

.sticky .underline:before {
        display: none;
    }

#top-nav .sticky .nav-icons li {
        padding: .1em;
    }

/*Show Class*/

#top-nav .sticky.showSticky {
        opacity: 1;
        transform: translateY(0);
    }

/*
    Media Queries
    */

@media (max-width: 960px) {

        #top-nav .topbar {
            display: none;
        }

        #top-nav .wide {
            display: none;
        }

        #top-nav .mobile {
            position: fixed; /*fixed*/
            top:0;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;
            max-width: 100vw;
            z-index: 999;
        }

        #top-nav .hamburger {
            display: flex;
        }

        #top-nav .mobile .hamburger ~ ul.menu {
            visibility: hidden;
            top: 0;
            left: 0;
        }

        #top-nav .mobile .hamburger.hamburger.is-active ~ ul.menu {
            visibility: visible;
            opacity: .95;
        }

        #top-nav .sticky,
        .showSticky {
            display: none;
        }

    }

/****************************************
Component: Hero
*****************************************/

/****************************************
Component: Modal
*****************************************/

#modal {
    display: none;
    display: none; /* Oculta el modal por defecto */
    position: fixed; /* Fija la posición del modal */
    z-index: 3; /* Asegúrate de que el modal esté encima de otro contenido */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo del modal */
    height: 100%; /* Alto completo del modal */
    overflow: auto; /* Permite desplazamiento si el contenido es muy grande */
    background-color: rgba(0,0,0,0.4); /* Fondo transparente */
    transition: all 0.3s ease-in-out;
    animation: fadeIn 0.3s;
  }

#modal.hide {
    animation: fadeOut 0.3s;
  }

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Margen del 15% del ancho y alto del modal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ancho del 80% */
  }

#modal.show-modal {
    display: block;
  }

/*VENDOR*/

/****************************************
Vendor: Plugins
*****************************************/

/*Contact Form 7*/

div.wpcf7 { 
    background-color: white;
    padding:1rem;
    font-size: 1.1rem;
    width: 100%;    
}

div.wpcf7 form{
        display: flex;
        flex-direction: column;
        gap: .7rem;
    }

div.wpcf7 p{
        text-align: left;
    }

div.wpcf7 label{
        font-weight: 600;
        font-size: .9rem;
        margin-bottom: 0.5rem;
    }

div.wpcf7 input[type="text"],
    div.wpcf7 input[type="email"],
    div.wpcf7 input[type="tel"],
    div.wpcf7 textarea {
        width: 100%;;
        font-weight: normal;
        margin-top: 0.5rem;
        background:white;
        color:#243436;
        padding: .7rem .5rem;
        line-height: 1;
        border: none;
        border-bottom: solid 1px #41B9C0;
    }

div.wpcf7 input[type="text"]:focus-visible,div.wpcf7 input[type="email"]:focus-visible,div.wpcf7 input[type="tel"]:focus-visible,div.wpcf7 textarea:focus-visible{
            border: solid 1px #41B9C0;
            outline: none;

        }

div.wpcf7 textarea{
        height: 8em;
        width: 100%;
    }

div.wpcf7 input[type="submit"],
    div.wpcf7 input[type="button"] { 
        display: inline-block;
        padding: .7rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.02rem;
        border: solid 1px #E54C78;
        border-radius: 24px;
        cursor: pointer;
        transition: .3s;
        background-color: #E54C78;
        color: white;
    }

div.wpcf7 input[type="submit"]:hover,div.wpcf7 input[type="button"]:hover{
            background-color: #fff;
            color: #E54C78;
        }

.boton-centrado {
    text-align: center;
    width: 100%;
}

select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    padding: .5rem .8rem;
    border-color: #E54C78;
}

.wpcf7 form.sent .wpcf7-response-output {
border-color: #E54C78;
}

/* Fibo Search */

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{
    border: solid 1px #E54C78;
    background-color: #fff;
    padding: 10px 24px 10px 48px;
    line-height: 20px;
    font-size: 14px;
    font-weight: normal;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover {
    background-color: #fff;
    border-color: #E54C78;
}

.dgwt-wcas-search-input::-moz-placeholder{
    font-weight: normal !important;
}

.dgwt-wcas-search-input::placeholder{
    font-weight: normal !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {

    background-color: #E54C78;
    color: #fff;
    left: 14px;
    top: 14px;

}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path {
        fill: #fff;
    }

.dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
    right: 15px;
}

.dgwt-wcas-suggestions-wrapp{
    box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.35);
    -webkit-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.35);
}

.dgwt-wcas-st-more{
    color: #E54C78;
    font-weight: 600;
}

/*Max Mega Menu*/

#mega-menu-wrap-principal{
    width: 100%;
}

#mega-menu-wrap-principal .mega-menu-toggle .mega-toggle-blocks-right{
    background-color: #E54C78;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link{
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #243436;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:active, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:focus-visible, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:active, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus-visible{
        color: #E54C78;
        font-weight: 600;
    }

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:hover > ul.mega-sub-menu,#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover > ul.mega-sub-menu{
        font-weight: 600;
    }

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link > ul.mega-sub-menu,#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link > ul.mega-sub-menu{
        font-weight: 600;
    }

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item > a.mega-menu-link:focus,#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus{
        color:#243436;
        font-weight: 600;
    }

#mega-menu-wrap-principal #mega-menu-principal li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    content: "\f078";
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 10px;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
    font-weight: 600;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu {
    border-radius: 0px;
    background: #fff;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.40);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.40);
    padding: .5rem;
}

h4.mega-block-title{
    font-size: 0.8rem !important;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: solid 2px #E54C78;
    line-height: 1rem;
    color: #E54C78;
    font-size: 0.8rem;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover{
            border-bottom: solid 2px #E54C78;
    }

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link{
    line-height: 1rem;
    padding: .3rem 0px;
    font-weight: 400;
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover{
        font-weight: 500;
    }

#mega-menu-wrap-principal #mega-menu-principal li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: .5rem;
}

@media only screen and (max-width: 960px) {
    #mega-menu-wrap-principal:has(.mega-menu-open) #mega-menu-principal[data-effect-mobile^="slide_"] + button.mega-close:before {
        display: flex;
        content: "\f00d";
        font-family: FontAwesome;
        font-weight: normal;
        color: #fff;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }

    #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item-has-children > a.mega-menu-link, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
        color: #ffffff;
        background: #0a8146;
        font-size: 1rem;
        padding: .8rem;
        height: 4rem;
    }
        #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item-has-children > a.mega-menu-link:hover, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item-has-children > a.mega-menu-link:active, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item-has-children > a.mega-menu-link:focus, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item-has-children > a.mega-menu-link:focus-visible, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:active, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus, #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus-visible{
            color: #fff;

        }

    #mega-menu-wrap-principal #mega-menu-principal li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
        content: "\f078";
        font-family: FontAwesome;
        font-size: 1rem;
    }

    #mega-menu-wrap-principal .mega-menu-toggle.mega-menu-open:after {
    opacity: 0.7;
    }

    #top-nav .menu ul a, #top-nav .menu ul ul a.btn-megamenu{
        font-size: .8rem;
        text-transform: none;
    }

    #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu{
        box-shadow: none;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        border-bottom: solid 1px #243436;
    }

    #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link{
        font-weight: 500;
    }

    #mega-menu-wrap-principal #mega-menu-principal>li.mega-menu-item {
    display: inline-block;
    width: 100%;
    }
}

#mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
color:#fff;
}

#mega-menu-principal > li.mega-menu-item.mega-current-menu-item.outlet-btn > a.mega-menu-link{
color: #002776 !important;
}

.textwidget.custom-html-widget{
    text-align: center;
}

#top-nav a.btn-megamenu{
        color: #E54C78 !important;
}

#top-nav a.btn-megamenu{
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        border: solid 1px #E54C78;
        background: #fff;
        border-radius: 0px;
        padding: .5rem 1.5rem;
        font-size: 1rem;
}

#top-nav a.btn-megamenu:hover{
            color: #fff!important;
        }

#top-nav a.btn-megamenu:hover{
            background-color: #E54C78;
        }

/*tables specs*/

.dwspecs-product-table .group-title{
        font-size: 1.2rem !important;
        color:#243436 !important;
        font-weight: 600 !important;
    }

.dwspecs-product-table .group-title{
        border-left: solid 4px #E54C78;
        padding-left: 1rem;
    }

.dwspecs-product-table table tr td:first-child{
    font-size: 1rem;
}

.dwspecs-product-table table tr td, .dwspecs-product-table table tr th{
    font-size: 0.9rem;
}

/*Filter*/

#cgf-filter-sidebar{
    display: none;
}

#cgf-filter-sidebar .ui-slider .ui-slider-handle{
    z-index: 1;
}

/*Swiper*/

.swiper {
    z-index: 0;
}

.swiper-button-prev{
    left: 0px;
    left: var(--swiper-navigation-sides-offset, 0px);
}

.swiper-button-next{
    right: 0px;
    right: var(--swiper-navigation-sides-offset, 0px);
}

.swiper-button-prev:after, .swiper-button-next:after{
    font-family: FontAwesome;
    font-size: 1.2rem;
    color:#D9D9D9;
}

.swiper-button-prev:after{
    content: "\f104";    
}

.swiper-button-next:after{
    content: "\f105";  
}

.dgwt-wcas-posts-results-headline{
    display: none;

}

.grecaptcha-badge { visibility: hidden !important; }

/*WPUPSell*/

.cuw-offers .cuw-container{
        border: solid 1px #E54C78 !important;
    }

.cuw-offers h4.cuw-product-title{
        font-size: 1.2rem;
    }

.cuw-offers h6.cuw-offer-title{

    }

.cuw-offers del .woocommerce-Price-amount.amount{
        -webkit-text-decoration: line-through;
        text-decoration: line-through;
    }

.cuw-offers ins .woocommerce-Price-amount.amount{
        font-weight: 600;
        font-size: 1.2rem;
        color: #E54C78;
    }

.cuw-offers .cuw-button{
        border-radius: 0px !important;

    }

span.cuw-offer-text{
    background: #102136;
}

/****************************************
Vendor: Slick Slider styles
*****************************************/

/* Loader */

.slick-loading .slick-list {
    background: transparent;
}

/* Arrows */

.slick-next,
.slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 48%;
    display: block;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
}

.slick-next:focus,
.slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-next:focus:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before {
    opacity: 1;
}

.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
    opacity: 0.25;
}

@media(max-width:480px) {
    .slick-next:before,
    .slick-prev:before {
        line-height: 1;
    }
}

[dir='rtl'] .slick-prev {
    left: auto;
}

.slick-prev:before {
    content: "\f104";
}

[dir='rtl'] .slick-prev:before {
    content: "\f104";
}

[dir='rtl'] .slick-next {
    right: auto;

}

.slick-next:before {
    content: "\f105";
}

[dir='rtl'] .slick-next:before {
    content: "\f105";
}

/* Dots */

.slider-dots .slick-slider {
    margin-bottom: 30px;
}

.slider-dots .slick-dots {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slider-dots .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}

.slider-dots .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slider-dots .slick-dots li button:focus,
.slider-dots .slick-dots li button:hover {
    outline: none;
}

.slider-dots .slick-dots li button:focus:before,
.slider-dots .slick-dots li button:hover:before {
    opacity: 1;
}

/***CARRUSEL***/

.carrusel {
    margin: auto;
}

.carrusel .slide {
    margin-left: .5rem;
    margin-right: .5rem;
}

.carrusel .slide img {
    width: 100%;
    height: auto;
}

/*media-queries*/

@media(max-width:480px) {
    .carrusel button.slick-next,
    .carrusel button.slick-prev {
        display: none!important;
    }
    .carrusel {
        padding: 0;
    }
}

/* Arrows */

.carrusel .slick-next,
.carrusel .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.carrusel .slick-next:focus,
.carrusel .slick-next:hover,
.carrusel .slick-prev:focus,
.carrusel .slick-prev:hover {
    color: transparent;
    outline: none;
    background: transparent;
}

.carrusel .slick-next:focus:before,
.carrusel .slick-next:hover:before,
.carrusel .slick-prev:focus:before,
.carrusel .slick-prev:hover:before {
    opacity: 1;
}

.carrusel .slick-next.slick-disabled:before,
.carrusel .slick-prev.slick-disabled:before {
    opacity: 1;
}

[dir='rtl'] .carrusel .slick-prev {
    left: auto;
}

.carrusel .slick-prev:before {
    content: "\f104";
}

[dir='rtl'] .carrusel .slick-prev:before {
    content: "\f104";
}

[dir='rtl'] .carrusel .slick-next {
    right: auto;
}

.carrusel .slick-next:before {
    content: "\f105";
}

[dir='rtl'] .carrusel .slick-next:before {
    content: "\f105";
}

/*ESSENCIAL*/

/* Dots */

.slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:focus,
.slick-dots li button:hover {
    outline: none;
}

.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-family: FontAwesome;
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "\f104";
    text-align: center;
    opacity: 1;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

/*Arrows*/

.slider .slick-next:before,
.slider .slick-prev:before {
    font-family: 'FontAwesome';
    font-size: 1.7rem;
    line-height: 1vw;
    opacity: 0.75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slider .slick-next {
    right: 2rem;
}

.slider .slick-prev {
    left: 2rem;
}

.carrusel .slick-next:before,
.carrusel .slick-prev:before {
    font-family: FontAwesome;
    font-size: 2rem;
    line-height: 1;
    opacity: 0.75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.carrusel .slick-next {
    right: -1rem;
}

.carrusel .slick-prev {
    left: -1rem;
}

.slick-dots li button:before {
    font-size: 10px;
    line-height: 10px;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "●";
    text-align: center;
    opacity: 1;
    color: #9fa59f;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

/* THEME LAYOUT */

/****************************************
Header Tag styles
*****************************************/

.header{
    grid-area: header;
}

/****************************************
NAV Styles
*****************************************/

/*Margin Content*/

.main-nav + *{
    /*margin-top: 56px $md 0px $xl 80px;*/
}

/*top-nav-home*/

#top-nav.home{
    background-position: center;
    background-size: cover;
}

/*top-nav-common*/

#top-nav.common{
    background-color: #5C7072;
}

/*top-nav*/

#top-nav{    
    font-family: 'Manrope', sans-serif;
}

/*position: absolute;*/

/*flex-grow: 1;/*para megamenu*/

/*display: block;/*para megamenu*/

#top-nav .menu a{
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.0375rem;
            color:#fff;
        }

#top-nav .menu a:hover{
                color: #E54C78;
            }

#top-nav .menu .current-menu-item > a{
            color: #E54C78 !important;
        }

#top-nav .menu .underline:before {
            background: #E54C78;
        }

#top-nav .menu .btn{
            padding: 0;
            border-radius: 0.3125rem;
        }

#top-nav .menu .btn:hover{
                background-color: #41B9C0;    
            }

#top-nav .menu .btn {
            margin-left: 1.2rem;
}

#top-nav .menu .btn a{
                color: white;
            }

#top-nav .menu .btn a.underline:before {
                display: none;
            }

/*Submenu*/

#top-nav .menu ul{
            background-color: #102136;      
        }

#top-nav .menu ul li{
                padding: .5rem;
            }

#top-nav .menu ul li a{
                    color: white;
                }

#top-nav .menu ul li:hover{
                    background-color: white;
                    color: #102136;                    
                }

#top-nav .menu ul li:hover > a{
                    color: #102136;
                }

/*wide-nav*/

#top-nav .wide{
    width: 100%;
    justify-content: center;
    padding: 1.5rem 1rem;   

}

#top-nav .wide .wide-inner{
        max-width: 1200px !important;

    }

#top-nav .wide .wide-inner{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: left;
        gap:1.5rem;
        z-index: 2;
        width: 100%;
        top: 0;

    }

#top-nav .wide .wide-inner .header-menu-top{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center; 
            gap: 1rem;
        }

#top-nav .wide .wide-inner .header-menu-top .top-logo{
                /*flex: 1;*/
            }

#top-nav .wide .wide-inner .header-menu-top .logo{
                display: block;
            }

#top-nav .wide .wide-inner .header-menu-top .logo img{
                    height: 42px;
                }

#top-nav .wide .wide-inner .header-menu{
            width: 100%;
            display: flex;
            justify-content: flex-end;

        }

/*2 Navs*/

#top-nav .wide .wide-inner .header-menu a{
                font-size: .8rem;
                font-weight: 900;
                color: #243436;
            }

#top-nav .wide .wide-inner .header-menu ul{

            }

/*mobile*/

#top-nav .mobile {
    background-color: #E54C78;
    backdrop-filter: blur(2px);
    padding: 1rem;
}

/*flex-grow: 1;*/

#top-nav .mobile .logo img{
            max-height: 24px; /*margin-top:content*/
        }

#top-nav .mobile .hamburger ~ ul.menu{
    background-color: #E54C78;
    }

#top-nav .mobile .hamburger ~ ul.menu .current-menu-item > a{
            color: #fff !important;
        }

#top-nav .mobile .hamburger ~ ul.menu .current-menu-item > a{
            border-bottom: solid 2px #fff;
        }

#top-nav .mobile .hamburger ~ ul.menu a{
            font-size: 1.1rem; 
            padding: 1.5rem;
            font-weight: 800;
        }

#top-nav .mobile .hamburger ~ ul.menu a:hover, #top-nav .mobile .hamburger ~ ul.menu a:active{
                color: #fff;
                border-bottom: solid 2px #fff;
            }

#top-nav .mobile .hamburger ~ ul.menu li:hover ul{
            display: none;
        }

#top-nav .mobile .hamburger ~ ul.menu li:has(ul) a::after{
            content:'';
        }

#top-nav .mobile .hamburger ~ ul.menu .btn a{
            padding: 1rem 1.5rem;
            font-size: .9rem;
        }

#top-nav .mobile .hamburger ~ ul.menu .nav-icons{
            gap: 2rem;
        }

#top-nav .mobile .hamburger ~ ul.menu .nav-icons i{
                font-size: 2rem;    
            }

#top-nav .mobile a.btn-wsp{
        padding: .5rem !important;
        
    }

#top-nav .mobile a.btn-wsp{
        font-size: 1.5rem;
        
    }

/*Sticky*/

#top-nav .sticky{
    background-color: #fff; 
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);
    -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);

}

#top-nav .sticky a{
        font-size: 0.7rem;
        letter-spacing: 1px;
        font-weight: 600;
        color: #243436;
        padding: .7rem;
    }

#top-nav .sticky .logo img{
        /*max-height: 24px;*/

    }

/*components*/

#top-nav .menu a.btn{
        color: #fff;
        border-color: #E54C78;
        background: #E54C78;
        border-radius: 0px;
        border: solid 1px #E54C78;
        margin: 0px;
        padding: .5rem 1rem;
    }

#top-nav .menu a.btn:hover{
            color: #E54C78;
            background-color: white;
        }

#top-nav .nav-icons a {
        color: #41B9C0;
    }

#top-nav .nav-icons a:hover{
            color: #fff;
        }

#top-nav .hamburger-inner,
    #top-nav .hamburger-inner::after,
    #top-nav .hamburger-inner::before {
        background-color: #fff;
    }

#top-nav .hamburger.is-active .hamburger-inner,
    #top-nav .hamburger.is-active .hamburger-inner::after,
    #top-nav .hamburger.is-active .hamburger-inner::before {
        background-color: #fff;
    }

/*topbar*/

.topbar{
    background-color: #243436;
    color:#fff;
    font-weight: 600;
    line-height: 14px;
    width: 100%;
    position: relative;
    z-index: 3;
}

.topbar .topbar__inner{
        max-width: 1200px !important;

    }

.topbar .topbar__inner{
        display: flex;
        margin-left: auto;
        margin-right: auto;
        justify-content: space-around;
        gap: 2rem;
        align-items: center;
        padding: 1rem;

    }

.topbar .topbar__inner .nav-social{
            justify-content: center;
        }

.topbar .topbar__inner .nav-social a{
                color: #fff;
            }

.topbar .topbar__inner .nav-social a:hover{
                    color: #E54C78;
                }

.topbar .topbar__inner .sep{
            height: 1rem;
            width: 2px;
            background-color: #fff;
        }

.topbar .topbar__inner a{
            color: #fff;
        }

.topbar .topbar__inner i{
            margin-right: .3rem;
        }

.topbar .topbar__inner .location{
            display: flex;
            gap: 1rem;
        }

.topbar .topbar__inner .location a{
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
            }

.topbar .topbar__inner .location a:hover{
                    color: #41B9C0;
                }

/*top Whatsapp button*/

nav a.btn-cta{
    color: #fff !important;
    padding: .7rem 1rem !important;
    display: flex !important;
}

nav a.btn-cta{
    background-color: #E54C78;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 100vw;
    gap: 0.5em;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    border: solid 1px #E54C78;
}

nav a.btn-cta:hover{
        color: #E54C78 !important;
    }

nav a.btn-cta:hover{
        background-color: #fff;
        border: solid 1px #E54C78;
    }

nav a.btn-cta i{
        font-size: 1rem;
    }

nav.mobile a.btn-wsp i{
    font-size: 1.5rem;
}

/*offer link*/

/*a{
        background-color: #fff !important; 
        color: $grey !important;
    }
    a.mega-menu-link{
        background-color: #fff !important; 
        color: $grey !important;
    }*/

.offer-btn .underline:before {
        background: #102136 !important;
    }

/****************************************
Sidebar
*****************************************/

.sidebar{
    grid-area: sidebar;
}

.widgets{
    background: #000;
    color: white;
}

/****************************************
Main area styles
*****************************************/

.main{
    grid-area: main;
}

/****************************************
Footer styles
*****************************************/

.footer{
    grid-area: footer;
}

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 2rem;
    background-color: #243436;
    color: white;
    background-size: cover;
    background-position: top center;   

}

footer a{
        color: #fff;
    }

footer a:hover{
            color: #41B9C0;
        }

/*foot-top*/

footer .foot-top{
        justify-items: initial;
        padding: 3rem 1rem;
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;        
    }

footer .foot-top .cg-foot{
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

footer .foot-top .cg-foot .logo {
                display: flex;
                    justify-content: center;
            }

footer .foot-top .cg-foot .logo img{
                    height: 64px;
                    margin-bottom: 1rem;
                }

footer .foot-top .cg-foot .cg-info{
                font-size: 13px;
            }

footer .foot-top .vert-navs{
            justify-items: start;
        }

footer .foot-top .vert-navs .vert-menu ul li{
                        padding: .5rem 0px;
                        text-align: left;
                    }

@media (min-width: 48em) {

    footer .foot-top .vert-navs .vert-menu ul li {
        text-align: right;
    }
}

@media (min-width: 48em) {

    footer .foot-top .vert-navs {
        justify-items: end;
    }
}

/*foot-mid*/

footer .foot-mid{ 
        align-items: flex-start;
        padding: 1rem;   
    }

footer .foot-mid .foot-column{
                width: 100%;
                display: grid;
        }

footer .foot-mid .foot-column h5{
                color: #fff;                
                display: inline-flex;
                border-bottom: solid 3px #E54C78;
                padding-bottom: .6rem;
                font-size: .9rem;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                letter-spacing: 0.02rem;
                text-transform: uppercase;
            }

footer .foot-mid .foot-column ul{ 
                padding-top: 1rem;
                display: flex;
                flex-direction: column;               
                font-size: 0.8rem;
            }

footer .foot-mid .foot-column ul li{
                    padding: .3rem 0px;
                    font-size: 0.8rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    letter-spacing: 0.0175rem;
                    color: #fff;
                }

footer .foot-mid .foot-column ul li a{
                        color: #fff;
                    }

footer .foot-mid .foot-column ul li a:hover{
                            color:#41B9C0;
                        }

footer .foot-mid .foot-column ul li i{
                        padding-right: .5rem;
                    }

@media (min-width: 48em) {

    footer .foot-mid .foot-column {
        display: block;
    }
}

/*foot-bottom*/

footer .foot-bottom{
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-direction: column;
        gap: 1rem;
    }

footer .foot-bottom .nav-social{
            justify-content: center;
            margin-top: 2rem;
        }

footer .foot-bottom .nav-social a{
                color: #fff;
            }

footer .foot-bottom .nav-social a:hover{
                    color: #E54C78;
                }

footer .foot-bottom .term-links{            
            font-size: 12px;
            text-align: center;
        }

footer .foot-bottom .term-links ul{ 
                display: inline-flex;
                gap: 1rem;
            }

footer .foot-bottom .term-links ul a{
                    -webkit-text-decoration: underline;
                    text-decoration: underline;
                }

footer .foot-bottom .last-logo{
            align-items: end;
        }

footer .foot-bottom .last-logo img{
                max-width: 192px;
            }

@media (min-width: 48em) {

    footer .foot-bottom {
        flex-direction: row;
    }
}

/****************************************
PAGE
*****************************************/

.site-main{
    margin-top: 0;
}

#page.main{
    margin-top:0px;
}

#page p{
    margin-bottom: 1lh;
}

.page-title{
    color:#fff;
    text-align: center;
    padding: 6rem 1rem;
    background-color: #D9D9D9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.page-title h1{
        font-weight:800;
        text-transform: uppercase;
        font-size: 2rem;
        border-bottom: solid 2px #E54C78;
        padding: .6rem;
        display: inline-block;
        margin-bottom: 0.6rem;
    }

.page-title h2{
        font-size: 1.1rem;
        font-weight: 500;

    }

@media (min-width: 48em) {

    .page-title h2 {
        font-size: 1.3rem;
    }
}

/****************************************
Sections
*****************************************/

.section-title{
    width: 100%;
    text-align: center;
    color: #243436;
}

.section-title h3{
      
    }

/**************************************
THEME Re-styling
***************************************/

/* THEME LAYOUT > PAGE TEMPLATES */

/****************************************
PAGE: Home
*****************************************/

/*Home header*/

.home header{
        background-color: #243436;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }

.home header#top-nav .wide .wide-inner .header-menu a {
            color: #fff;
        }

/* Video Background */

.home header .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover; /* ESTO ES CLAVE: hace que el video cubra todo sin estirarse */
            z-index: 1; /* Nivel más bajo */
        }

/* Capa opcional para oscurecer el video y resaltar el logo blanco */

.home header .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4); /* Negro al 40% de opacidad */
            z-index: 2;
        }

.home header .hero{
            height: 100vh;
            display: flex;
            align-items: flex-end;
        }

.home header .hero-content{
            z-index: 2;
            color: #fff;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;

        }

.home header .hero-content h1{
                font-size: 2rem;
                padding-bottom: 1rem;
                margin-bottom: 1rem;
                border-bottom: solid 2px #E54C78;
                display: inline-flex;
            }

.home header .hero-content h3{
                color: #fff;
                font-weight: 500;
                margin-bottom: .5rem;
            }

.home header .hero-content p{
                font-size:  1rem;
                width: 100%;
            }

.home header .hero-content .wsp-buttons{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
            }

.home header .hero-content .wsp-buttons .wsp-btn-hero{
                border: solid 1px #fff;
                border-radius: 50px;
                padding: .7rem 1.5rem;
                color: #fff;
                font-size: .9rem;
                display: flex;
                flex-direction: row;
                gap: .5rem;
                justify-content: center;
                align-items: center;
                }

.home header .hero-content .wsp-buttons .wsp-btn-hero i{
                        font-size: 1.5rem;
                    }

.home header .hero-content .wsp-buttons .wsp-btn-hero:hover{
                    background-color: #fff;
                    color: #243436;
                }

@media (min-width: 40em) {

    .home header .hero-content .wsp-buttons .wsp-btn-hero {
        font-size: 1rem;
    }
}

@media (min-width: 40em) {

    .home header .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 40em) {

    .home header .hero-content h3 {
        font-size: 1.2rem;
    }
}

@media (min-width: 48em) {

    .home header .hero-content p {
        width: 48%;
    }
}

@media (min-width: 40em) {

    .home header .hero-content .wsp-buttons {
        flex-wrap: none;
        justify-content: left;
    }
}

@media (min-width: 62em) {

    .home header .hero {
        align-items: center;
    }
}

@media (min-width: 40em) {

    .home header .hero-content {
        align-items: flex-start;
    }
}

@media (min-width: 48em) {

    .home header {
        justify-content: space-between;
    }
}

/*Home Layout*/

#home .cta-first{
            background-color: #E54C78;
            padding:3rem;
            width: 100%;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: row;
            justify-content: center;
            color: #fff;;

        }

/* Sección Contenedora (Fondo Rosa) */

.cta-beneficios-section {
    background-color: #E54C78; /* Color rosa de la imagen */
    width: 100%;
    position: relative;
    overflow: hidden; /* Para recortar la imagen si es muy alta */
    padding-bottom: 0; /* Abajo 0 para que la imagen toque el borde */
}

/* Contenedor Flexbox Principal */

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 1rem;
    
    display: flex; /* Activamos Flexbox */
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: center; /* Centra el grupo horizontalmente */
    gap: 40px; /* Espacio entre icono, texto e imagen */
    
    min-height: 250px; /* Altura mínima aproximada */
}

/* 1. Estilos del Icono */

.cta-icon-box {
    flex: 0 0 auto; /* No crece ni se encoge */
}

.cta-icon {
    width: 180px; /* Tamaño del icono */
    height: auto;
    filter: brightness(0) invert(1); /* Vuelve blanco cualquier icono negro/color */
    opacity: 0.9;
}

/* 2. Estilos del Contenido (Texto) */

.cta-content-box {
    flex: 1; /* Toma el espacio disponible */
    color: #ffffff;
    max-width: 600px;
}

.cta-content-box h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.cta-content-box p {
    font-size: 1.1rem;
    margin: 0 0 25px 0;
    font-weight: 300;
}

.cta-content-box p strong {
    font-weight: 700;
}

/* Botón Blanco */

.cta-btn {
    display: inline-block;
    background-color: #ffffff;
    color: #E54C78; /* Mismo rosa del fondo para el texto */
    padding: 1.5rem 2.5rem;
    border-radius: 50px; /* Bordes totalmente redondos (Pill shape) */
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn:hover {
    color:#E54C78;
    transform: translateY(-2px);
}

/* 3. Estilos de la Imagen (Doctora) */

.cta-image-box {
    flex: 0 0 auto;
    align-self: flex-end; /* Alinea la imagen al borde inferior del contenedor flex */
    margin-bottom: -5px; /* Un pequeño ajuste para asegurar que no quede espacio blanco abajo */
}

.cta-doctor-img {
    display: block;
    max-height: 280px; /* Ajusta esto según el tamaño de tu foto real */
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* --- RESPONSIVE (Móvil) --- */

@media (max-width: 900px) {

    .cta-beneficios-section{
        padding-top: 40px; /* Espacio arriba */
    }

    .cta-container {
        flex-direction: column; /* Apila todo verticalmente */
        text-align: center;
        gap: 20px;
    }

    .cta-image-box {
        align-self: center; /* Centra la imagen en móvil */
        margin-top: 20px;
    }
    
    .cta-icon {
        width: 120px;
    }
}

.servicios-section {
    padding: 60px 20px;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.servicios-header {
    text-align: center;
    margin-bottom: 50px;
}

.servicios-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.servicios-header p {
    color: #666;
    font-size: 1.1rem;
}

/* GRID */

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    grid-gap: 30px; 
    gap: 30px;
}

/* Tarjeta */

.servicio-card {
    position: relative;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.servicio-card:hover {
    transform: translateY(-5px);
}

.servicio-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.servicio-card:hover .servicio-bg {
    transform: scale(1.05);
}

.servicio-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 85%;
    background-color: #fff;
    padding: 25px;
    border-top-right-radius: 8px;
    box-sizing: border-box;
    z-index: 2;
}

.servicio-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.servicio-icon {
    width: 30px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.servicio-content h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    padding-left: .5rem;
    border-left: solid 4px #E54C78;
}

.servicio-desc p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botón Leer Más (Estilo Original) */

.servicio-link {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #41B9C0;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
    padding: .8rem;
    border: solid 1px #41B9C0;
    background: transparent;
    cursor: pointer; /* Importante para botones */
}

.servicio-link:hover {
    color: #fff !important;
}

.servicio-link:hover {
    background-color: #41B9C0;
}

.servicio-link .arrow {
    font-size: 1.2rem;
    line-height: 1;
}

/* =========================================
   NUEVOS ESTILOS PARA EL MODAL
   ========================================= */

/* Fondo oscuro (Overlay) */

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999; /* Muy alto para tapar todo */
    
    /* Flex para centrar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Clase para mostrar el modal */

.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Contenedor Blanco del Modal */

.modal-wrapper {
    background: #fff;
    width: 100%;
    max-width: 900px;
    max-height: 90vh; /* Máximo 90% del alto de pantalla */
    overflow-y: auto; /* Scroll interno si es necesario */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.is-active .modal-wrapper {
    transform: translateY(0);
}

/* Botón cerrar (X) */

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border: none;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover {
    background: #e0e0e0;
}

/* Layout interno del Modal (Imagen Izq - Texto Der) */

.modal-content-grid {
    display: flex;
    flex-direction: row;
}

/* Columna Imagen */

.modal-img-col {
    width: 40%;
    background: #f4f4f4;
}

.modal-img-col img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    min-height: 300px; /* Altura mínima */
}

/* Columna Texto */

.modal-info-col {
    width: 60%;
    padding: 40px;
}

.modal-title {
    font-size: 2rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 4px solid #E54C78;
    display: inline-block;
    padding-bottom: 5px;
}

.modal-body-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Elementos dentro del texto WYSIWYG */

.modal-body-text strong { color: #000; font-weight: 700; }

.modal-body-text p { margin-bottom: 15px; }

/* Botón Agendar dentro del modal */

.btn-agenda-modal {
    display: inline-block;
    background-color: #E54C78;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s;
    border: solid 1px #E54C78;
}

.btn-agenda-modal:hover {
    background-color: #fff;
    color:#E54C78
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .modal-content-grid {
        flex-direction: column;
    }
    .modal-img-col, .modal-info-col {
        width: 100%;
    }
    .modal-img-col {
        height: auto;
    }
    .modal-info-col {
        padding: 25px;
    }
}

/* --- VARIABLES --- */

:root {
    --c-oscuro: #555555;
}

/* --- ESTRUCTURA --- */

.centros-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* --- CABECERA --- */

.centros-header {
    background-color: #41B9C0;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
}

.centros-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.centros-header p {
    font-size: 1.1rem;
    font-weight: 300;
    margin: 0;
}

/* --- CUERPO OSCURO --- */

.centros-body {
    position: relative;
    background-color: #fff;
    /* Imagen de fondo */
    background-image: url('media/centros-bg.webp');
    background-size: cover;
    background-position: center;
    padding: 60px 0 100px;
}

/* Triángulo (::before sin z-index) */

.centros-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #41B9C0;
}

/* --- GRID SYSTEM & RESPONSIVE LOGIC --- */

.centros-grid {
    display: grid;
    /* Escritorio (> 920px): 3 columnas iguales */
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    gap: 30px;
    align-items: start;
}

/* CAMBIO DE DISEÑO: Tablets y Pantallas < 920px */

@media (max-width: 920px) {
    .centros-grid {
        /* Cambiamos a 2 columnas */
        grid-template-columns: 1fr 1fr;
    }

    /* El Formulario: Pasa abajo y ancho completo */
    .card-form-wrapper {
        grid-column: 1 / -1; /* Ocupa de la línea 1 a la última */
        order: 3;            /* Se mueve visualmente al final */
    }

    /* Los Centros: Se mantienen arriba */
    .card-centro:nth-of-type(2) { order: 1; } /* El Cortijo */
    .card-centro:nth-of-type(3) { order: 2; } /* Talagante */
}

/* CAMBIO DE DISEÑO: Móviles < 600px */

@media (max-width: 600px) {
    .centros-grid {
        grid-template-columns: 1fr; /* 1 sola columna */
    }
    /* El orden se mantiene (Form al final), pero ahora todo es 1 columna */
}

/* --- ESTILOS TARJETAS --- */

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* --- ESTILO DEL CONTENEDOR (La tarjeta blanca) --- */

.card-form-wrapper {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px; /* Bordes redondeados de la tarjeta */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra suave */
    max-width: 100%;

}

.card-form-wrapper h4{
        font-size: 1.2rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: solid 2px #E54C78;
    }

.card-form-wrapper p{
        font-size: 0.9rem;
    }

/* --- ESTILOS CENTROS --- */

.card-centro {
    text-align: center;
    padding-bottom: 30px;
    height: 100%; /* Para igualar alturas si están en la misma fila */
}

.centro-img {
    height: 100%;
    width: 100%;
}

.centro-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.centro-content {
    padding: 25px 30px;
}

.label-centro {
    display: block;
    font-size: 0.8rem;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.title-centro {
    font-size: 1.5rem;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.divider {
    width: 50px;
    height: 3px;
    background-color: #41B9C0;
    margin: 15px auto 25px auto;
}

.list-details {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.list-details li {
    margin-bottom: 12px;
}

.list-details a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #666;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: color 0.3s;
}

.list-details a:hover {
    color: #41B9C0;
}

.list-details i {
    color: #41B9C0;
    width: 20px;
    text-align: center;
    margin-top: 3px;
}

.btn-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #E54C78;
    border: solid 1px #E54C78;
    color: #fff;
    padding: 10px 30px;
    border-radius: 50px;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-card:hover {
    background-color: #fff;
    color:#E54C78;
}

/* --- VARIABLES (Si ya las tienes, ignora esto) --- */

:root {
    --c-rosa: #ea5c83;
    --c-texto: #333;
    --c-gris-p: #666;
}

/* --- SECCIÓN EQUIPO --- */

.equipo-section {
    background-color: #fff; /* Fondo blanco */
    overflow: hidden; /* Evita scrolls horizontales si la imagen es muy grande */
    position: relative;
}

/* Contenedor fluido para usar todo el ancho en la imagen */

.equipo-container-fluid {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px; /* Altura mínima para que se vea bien en desktop */
}

/* --- 1. COLUMNA TEXTO (Izquierda) --- */

.equipo-content {
    flex: 1; /* Ocupa el espacio disponible (aprox 50%) */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: flex-end; /* Empuja el texto hacia la derecha (hacia la imagen) */
    padding: 60px 40px; 
    box-sizing: border-box;
}

/* Envoltura del texto para controlar el ancho máximo */

.equipo-text-wrap {
    max-width: 100%; /* Ancho del bloque de texto */
    padding-right: 40px; /* Un poco de aire antes del corte */
}

.equipo-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #333;
    color: var(--c-texto);
    line-height: 1.1;
    margin-bottom: 25px;
}

.equipo-content p {
    font-size: 1.1rem;
    color: #555;
    color: var(--c-gris-p);
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Botón Rosa (Estilo Pill) */

.btn-rosa-pill {
    display: inline-block;
    background-color: #E54C78;
    color: #fff;
    -webkit-text-decoration: none;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    border: solid 1px #E54C78;
}

.btn-rosa-pill:hover {
    background-color: #fff;
    color: #E54C78;
}

/* --- 2. COLUMNA VISUAL (Derecha) --- */

.equipo-visual {
    flex: 1; /* Ocupa el otro 50% */
    position: relative;
    min-height: 400px;
    
    /* LA MAGIA DEL CORTE DIAGONAL */
    /* Explicación: Polígono de 4 puntos.
       1. Top-left: Empieza al 15% del ancho (creando el hueco blanco).
       2. Top-right: 100% ancho.
       3. Bottom-right: 100% ancho.
       4. Bottom-left: 0% ancho. 
    */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    
    /* Corrección visual: Margen izquierdo negativo opcional si quieres
       que la imagen se meta más hacia el texto, pero el clip-path ya lo maneja. */
}

.equipo-visual img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* --- RESPONSIVE --- */

/* Pantallas Medianas (Tablets vertical y abajo) */

@media (max-width: 900px) {
    .equipo-content h2 {
        font-size: 2.5rem;
    }
    
    /* Ajustamos el ángulo del corte para que no sea tan brusco en pantallas más estrechas */
    .equipo-visual {
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Móviles */

@media (max-width: 768px) {
    .equipo-container-fluid {
        flex-direction: column; /* Apila uno sobre otro */
    }
    
    .equipo-content {
        justify-content: center; /* Centra el texto en móvil */
        padding: 50px 20px;
        order: 1; /* Texto primero */
    }
    
    .equipo-text-wrap {
        padding-right: 0;
        text-align: center; /* Texto centrado en móvil */
    }
    
    .equipo-visual {
        order: 2; /* Imagen abajo (o pon 0 para imagen arriba) */
        min-height: 300px;
        width: 100%;
        
        /* En móvil quitamos el corte diagonal porque se ve raro en vertical */
        clip-path: none; 
    }
}

/* --- VARIABLES --- */

:root {
    --color-texto: #333;
    --color-gris: #666;
}

/* =========================================================
   1. ESTADO BASE (Escritorio > 768px) -> OCULTO
   ========================================================= */

.cta-servicios-mobile-section {
    display: none; /* Por defecto no se ve */
}

/* =========================================================
   2. ESTADO TABLET (Hasta 768px) -> DISEÑO LADO A LADO
   ========================================================= */

.cta-servicios-mobile-section {
        display: block; /* Hacemos visible la sección */
        background-color: #fff;
        width: 100%;
        overflow: hidden;
    }

.cta-mobile-wrapper {
        display: flex; /* Flexbox para poner imagen y texto lado a lado */
        flex-direction: row;
        height: 350px; /* Altura fija para tablet */
        width: 100%;
    }

/* Columna Imagen (Izquierda) */

.cta-mobile-img {
        width: 50%;
        height: 100%;
        position: relative;
    }

.cta-mobile-img img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; /* Recorta la imagen para llenar el espacio */
        -o-object-position: center;
           object-position: center;
        display: block;
    }

/* Columna Contenido (Derecha) */

.cta-mobile-content {
        width: 50%;
        display: flex;
        align-items: center; /* Centrar verticalmente */
        justify-content: center;
        padding: 30px;
        background-color: #fff;
    }

.cta-text-inner {
        max-width: 300px;
    }

/* =========================================================
   3. ESTADO MÓVIL (Hasta 480px) -> DISEÑO OVERLAY
   ========================================================= */

@media (max-width: 480px) {

    .cta-mobile-wrapper {
        display: block; /* Quitamos flex row */
        position: relative; /* Para posicionar absoluto */
        height: 450px; /* Altura para móvil */
    }

    /* La imagen pasa a ser el "Fondo" completo */
    .cta-mobile-img {
        width: 100%;
        height: 100%;
        position: absolute; /* Se va al fondo */
        top: 0;
        left: 0;
        z-index: 1;
    }

    /* El contenido pasa a ser una caja flotante */
    .cta-mobile-content {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2; /* Encima de la imagen */
        background-color: transparent; /* Quitamos el fondo blanco total */
        
        /* Centramos la caja blanca */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    /* La caja blanca interna */
    .cta-text-inner {
        background-color: rgba(255, 255, 255, 0.92); /* Blanco casi sólido */
        padding: 30px 20px;
        text-align: center;
        border-radius: 4px; /* Opcional, esquinas un poco suaves */
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        max-width: 100%;
    }
}

/* =========================================================
   ESTILOS COMUNES DE TEXTO Y BOTÓN
   ========================================================= */

.cta-text-inner h2 {
    font-size: 1.5rem;
    font-weight: 600; /* Medium/Semibold */
    color: #333;
    color: var(--color-texto);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.cta-text-inner p {
    font-size: 0.95rem;
    color: #666;
    color: var(--color-gris);
    margin: 0 0 25px 0;
    line-height: 1.4;
}

/* Botón Rosa */

.btn-cta-rosa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #E54C78;
    border: solid 1px #E54C78;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px; /* Pill shape */
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.3s;
    /* En móvil, queremos que el botón ocupe casi todo el ancho si se ve muy chico */
    max-width: 100%; 
}

.btn-cta-rosa:hover {
    background-color: #fff;
    color:#E54C78
}

.btn-cta-rosa i {
    font-size: 0.9rem;
}

/* Ajuste específico de texto para tablet (más alineado a la izquierda) */

@media (min-width: 481px) and (max-width: 768px) {
    .cta-text-inner {
        text-align: left;
    }
    .btn-cta-rosa {
        display: inline-flex; /* Botón auto width */
    }
}

/* Ajuste específico de texto para móvil (Centrado) */

@media (max-width: 480px) {
    .cta-text-inner {
        text-align: center;
    }
    .btn-cta-rosa {
        width: 100%; /* Botón ancho completo en la caja */
    }
}

/****************************************
PAGE: Blog
*****************************************/

/*Post Archive*/

#blog-archive .page-title{
        text-align: left;
        padding: 1rem; 
        margin-bottom: 1rem;
    }

#blog-archive .page-title h1{
            font-size: 3rem;
            text-transform: uppercase;
            padding: 0;
            border: 0;
            padding-bottom: .5rem;
            border-bottom: solid 4px #E54C78;
            margin-bottom: 0.8rem;
        }

#blog-archive .page-title h2{
            font-size: 1.5rem;
            
        }

#blog-archive .posts-container{
        grid-auto-rows: 1fr;
        gap: 1rem;
    }

#blog-archive .post{
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 1rem;
        padding: 1rem;
        overflow: hidden;
        border: solid 1px #fff;
        transition: .3s ease-in-out;
    }

#blog-archive .post .post-thumbnail img{
                width: 100%;
                height: 200px;
                -o-object-fit: cover;
                   object-fit: cover;
                display: block;
                transition: .3s ease-in-out;

            }

#blog-archive .post h2{
            font-size: 1.3rem;
        }

#blog-archive .post h2 a{
                color: #243436;                
            }

#blog-archive .post h2 a:hover{
                    color: #E54C78;
                }

#blog-archive .post .entry-excerpt{
            flex-grow: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3; 
            -webkit-box-orient: vertical;  
            overflow: hidden;
            line-height: 1.5;
            max-height: 4.5em; 
        }

#blog-archive .post a.read-more{
            margin-top: auto;
            padding: 15px;
            text-align: center;
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            font-size: 0.8rem;
            padding: .8rem;
            color: #fff;
            background-color: #E54C78;
            border: solid 1px #E54C78;
        }

#blog-archive .post a.read-more:hover{
                background-color: #fff;
                color: #E54C78;
            }

#blog-archive .post:hover{
        border: solid 1px #e1e1e1;
    }

#blog-archive .post:hover .post-thumbnail img{
                
            }

.line-mid-green{
    height: 4px;
    background-color: #E54C78;
    width: 50%;
}

/*Single Post*/

#blog-single .post .entry-title{
            padding-top: 1rem;            
            padding-bottom: 1rem;
        }

#blog-single .post .post-thumbnail{
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

#blog-single .post .post-thumbnail img{
                width: 100%;
                height: auto;
                background-size: cover;
            }

#blog-single .post .entry-content{
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

#blog-single .post .entry-content p{
                font-size: 1.1rem;
                margin-top: 1lh;
                margin-bottom: 1lh;
            }

#blog-single .post .entry-content p:has(img) {
            display: inline-block; /* Permite que se pongan uno al lado del otro */
            width: 48%;            /* Casi la mitad (dejamos espacio para margen) */
            vertical-align: top;   /* Se alinean arriba */
            margin-right: 2%;      /* Espacio a la derecha */
            margin-bottom: 20px;
            box-sizing: border-box;
        }

#blog-single .post .entry-content p:has(img):nth-of-type(even) {
            margin-right: 0;
        }

#blog-single .post .entry-content p:has(img) img {
            height: 300px !important;
        }

#blog-single .post .entry-content p:has(img) img {
            width: 100%;              /* Ocupa todo el ancho de su columna */ /* 1. Define la altura fija que quieras (puedes cambiar 300px por lo que gustes) */
            -o-object-fit: cover;
               object-fit: cover;        /* 2. RECORTA lo que sobra para no deformar */
            -o-object-position: center;
               object-position: center;  /* 3. Centra la imagen para que el recorte sea parejo */           
            display: block;
            border-radius: 4px;       /* Opcional: queda bonito con bordes suaves */
        }

/* IMPORTANTE: Esto limpia el diseño para que el texto que escribas debajo no se suba */

#blog-single .post .entry-content::after {
            content: "";
            display: block;
            clear: both;
        }

@media (max-width: 768px) {
            #blog-single .post .entry-content p:has(img) img {
                height: auto !important; 
            }
        }

#blog-single .post-navigation{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }

#blog-single .post-navigation a{
            font-weight: 600;
        }

.caja-compartir {
    padding: 1rem;
    background: #f9f9f9;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;

}

.caja-compartir h5{
        font-size: 1rem;
    }

.btn-social {
    display: inline-block;
    padding: 10px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: white;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: opacity 0.3s;
}

.btn-social:hover {
    opacity: 0.8;
    color: white;
}

/* Colores de cada red social */

.fb { background-color: #3b5998; }

.tw { background-color: #000000; }

/* X es negro ahora */

.wa { background-color: #25D366; }

.li { background-color: #0077b5; }

/****************************************
COMMON PAGES STYLES
*****************************************/

/****************************************
COMMON PAGES STYLES
*****************************************/

/* --- VARIABLES --- */

:root {
    --c-rosa: #ea5c83;
    --c-texto: #333;
    --c-gris-p: #555;
    --c-borde: #e0e0e0; /* Color del separador */
}

.servicios-listado-section {
    padding: 60px 20px;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- FILA DEL SERVICIO --- */

.servicio-item-row {
    display: flex;
    gap: 40px; 
    
    /* SEPARADOR ENTRE POSTS */
    padding-bottom: 60px;       /* Espacio interno antes de la línea */
    margin-bottom: 60px;        /* Espacio externo después de la línea */
    border-bottom: 1px solid #e0e0e0;
    border-bottom: 1px solid var(--c-borde); /* La línea separadora */
    
    /* IMPORTANTE: No usamos align-items: flex-start.
       Al dejar el valor por defecto (stretch), ambas columnas tendrán la misma altura. */
}

/* Quitar el borde del último elemento */

.servicio-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Columna Imagen */

.servicio-img-col {
    flex: 0 0 400px; /* Ancho fijo un poco más grande según tu foto */
    max-width: 400px;
    position: relative; /* Necesario para que la img se comporte bien */
}

.servicio-img-col img {
    width: 100%;
    height: 100%; /* Ocupa todo el alto disponible de la columna */
    -o-object-fit: cover;
       object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarse */
    border-radius: 12px; /* Bordes redondeados */
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Columna Información */

.servicio-info-col {
    flex: 1; 
    display: flex;
    flex-direction: column; /* Para organizar el contenido verticalmente */
    justify-content: center; /* Opcional: Centra el contenido verticalmente si la imagen es muy alta */
}

/* Título */

.servicio-titulo {
    font-size: 2.2rem;
    font-weight: 800;
    color: #333;
    color: var(--c-texto);
    margin: 0 0 30px 0;
    display: inline-block;
    position: relative;
    padding-bottom: 8px; /* Espacio para la línea rosa */
    border-bottom: 4px solid #E54C78; /* Línea rosa pegada al texto */
    width: -moz-fit-content;
    width: fit-content; /* La línea ocupa solo el ancho del texto */
}

/* Contenido WYSIWYG */

.servicio-body {
    font-size: 1.05rem;
    color: #555;
    color: var(--c-gris-p);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Estilos internos del texto (Preguntas en negrita) */

.servicio-body p {
    margin-bottom: 20px;
}

.servicio-body strong, 
.servicio-body b {
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    display: block; /* Hacemos que la pregunta ocupe su propia línea */
    margin-bottom: 5px;
}

/* Botón Agenda */

.servicio-btn-wrapper {
    margin-top: auto; /* Si quieres que el botón siempre se vaya al fondo, descomenta esto */
}

.btn-agenda-rosa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #E54C78;
    color: #fff;
    padding: 14px 35px;
    border-radius: 50px;
    border:solid 1px #E54C78;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(234, 92, 131, 0.3);
}

.btn-agenda-rosa:hover {
    background-color: #fff;
    color:#E54C78;
    transform: translateY(-2px);
}

/* --- RESPONSIVE --- */

@media (max-width: 900px) {
    .servicio-item-row {
        flex-direction: column; 
        gap: 25px;
        /* En móvil quizás quieras reducir el padding del separador */
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .servicio-img-col {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 250px; /* En móvil definimos una altura fija para la foto */
    }

    .servicio-img-col img {
        height: 100%; /* Se ajusta a los 250px definidos arriba */
    }
    
    .servicio-titulo {
        font-size: 1.8rem;
    }
}

/* --- VARIABLES (Asegúrate de tenerlas definidas) --- */

:root {
    --c-rosa: #ea5c83;
    --c-texto: #333;
    --c-gris-p: #555;
}

.single-servicio-section {
    padding: 80px 20px;
    background-color: #fff;
    min-height: 60vh; /* Asegura que ocupe buen espacio en pantalla */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- CONTENEDOR FLEX PRINCIPAL --- */

.servicio-single-row {
    display: flex;
    gap: 50px; /* Un poco más de espacio que en el listado */
    align-items: stretch; /* CLAVE: Estira ambas columnas al mismo alto */
}

/* --- COLUMNA IMAGEN --- */

.servicio-single-img {
    flex: 0 0 50%; /* Ocupa el 50% del ancho */
    max-width: 50%;
    position: relative;
}

.servicio-single-img img {
    width: 100%;
    height: 100%; /* CLAVE: Se fuerza a llenar la columna */
    -o-object-fit: cover;
       object-fit: cover; /* CLAVE: Recorta la imagen para no deformarla */
    border-radius: 15px;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- COLUMNA INFO --- */

.servicio-single-info {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente si hay poco texto */
}

/* Título H1 */

.servicio-single-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
    color: var(--c-texto);
    margin: 0 0 35px 0;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
    width: -moz-fit-content;
    width: fit-content;
}

/* Línea rosa debajo del título */

.servicio-single-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #E54C78;
}

/* Cuerpo del texto */

.servicio-single-body {
    font-size: 1.1rem;
    color: #555;
    color: var(--c-gris-p);
    line-height: 1.7;
    margin-bottom: 40px;
}

.servicio-single-body p {
    margin-bottom: 20px;
}

/* Estilo para las preguntas en negrita */

.servicio-single-body strong, 
.servicio-single-body b {
    color: #000;
    font-weight: 800;
    display: block;
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

/* Botón */

.btn-agenda-rosa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #E54C78;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 5px 15px rgba(234, 92, 131, 0.4);
}

.btn-agenda-rosa:hover {
    background-color: #fff;
    transform: translateY(-3px);
}

/* --- RESPONSIVE --- */

@media (max-width: 900px) {
    .servicio-single-row {
        flex-direction: column;
    }

    .servicio-single-img {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 300px; /* Altura fija en móvil */
    }

    .servicio-single-title {
        font-size: 2rem;
        margin-top: 20px;
    }
}

/****************************************
PAGE: Nosotros
*****************************************/

#nosotros .page-title{
    color:#243436;
    }

#nosotros .page-title h1{

        }

#nosotros .page-title h2{


        }

.staff-header{
    padding: 2rem 1rem;
    text-align: center;
}

.staff-header h2{

    }

.staff-header p{

    }

/* --- GRID SYSTEM --- */

.staff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    gap: 30px;
    align-items: stretch; /* Asegura que todas las celdas del grid tengan el alto de la más alta */
}

/* --- TARJETA DEL PROFESIONAL --- */

.pro-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    padding: 1rem;
    
    /* --- CLAVE PARA IGUALAR ALTURAS --- */
    display: flex;          /* Convierte la tarjeta en un contenedor flexible */
    flex-direction: column; /* Apila los elementos verticalmente (Img, Info, Footer) */
    height: 100%;           /* Ocupa el 100% de la altura de la celda del grid */
}

.pro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #f0f0f0;
}

/* --- 1. IMAGEN --- */

.pro-img-wrapper {
    width: 100%;
    height: 320px; /* Altura fija para la imagen es vital */
    overflow: hidden;
    background-color: #f9f9f9;
    /* border-radius: 12px;  <-- Si quieres que la imagen sea cuadrada arriba y rellene, quita esto o ajustalo */
    flex-shrink: 0; /* Evita que la imagen se achique si falta espacio */
}

.pro-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top center;
       object-position: top center;
    transition: transform 0.5s ease;
}

.pro-card:hover .pro-img-wrapper img {
    transform: scale(1.08);
}

/* --- 2. INFORMACIÓN --- */

.pro-info {
    padding: 20px 5px;
    text-align: left;
    /* No necesitamos altura fija aquí, dejaremos que el footer haga el trabajo */
}

.pro-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px 0;
}

.pro-specialty {
    display: block;
    font-size: 0.95rem;
    color: #444;
    font-weight: 500;
    margin-bottom: 3px;
}

.pro-role {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px; /* Un poco de aire arriba del cargo */
}

/* --- 3. FOOTER (LINKS) --- */

.pro-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* --- CLAVE PARA ALINEAR ABAJO --- */
    margin-top: auto; /* Esto empuja el footer al fondo de la tarjeta, llenando el espacio vacío */
}

/* Estilos de los links (se mantienen igual) */

.pro-link {
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.pro-link:hover { opacity: 0.7; }

.link-agenda { color: #ea5c83; }

.link-agenda i { font-size: 1rem; }

.link-linkedin { color: #777; }

.link-linkedin i { font-size: 1.1rem; color: #888; }

/* RESPONSIVE */

@media (max-width: 1024px) {
    .staff-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .staff-grid { grid-template-columns: 1fr; }
}

/* --- VARIABLES --- */

:root {
    --c-rosa: #ea5c83;
    --c-turquesa: #48b5c4;
    --c-texto: #333;
    --c-texto-p: #555;
}

/* --- CONTENEDOR PRINCIPAL --- */

.inside-section {
    width: 100%;
    background-color: #fff;
    /* En pantallas grandes, limitamos el ancho o lo dejamos full width según prefieras. 
       Aquí lo dejo full width como en la foto */
}

.inside-wrapper {
    display: grid;
    /* Dos columnas iguales: Izquierda (Hero) y Derecha (Grid 2x2) */
    grid-template-columns: 1fr 1fr;
    min-height: 600px; /* Altura mínima para que se vea imponente */
}

/* --- COLUMNA IZQUIERDA (HERO) --- */

.inside-left-hero {
    position: relative;
    width: 100%;
    height: 100%; /* Ocupa todo el alto disponible */
    overflow: hidden;
}

.bg-img-hero {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* Recorta la imagen para llenar el espacio */
    display: block;
}

/* Caja de Texto Flotante */

.hero-quote-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    background-color: rgba(255, 255, 255, 0.85); /* Blanco semitransparente */
    padding: 40px;
    width: 70%; /* Ancho relativo a la columna izquierda */
    max-width: 500px;
    text-align: center;
    backdrop-filter: blur(2px); /* Efecto borroso opcional detrás */
}

.hero-quote-box p {
    font-size: 1.8rem;
    color: #333;
    color: var(--c-texto);
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

/* --- COLUMNA DERECHA (GRID 2x2) --- */

.inside-right-grid {
    display: grid;
    /* Dos columnas internas y dos filas internas */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Celdas Genéricas */

.grid-cell {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Celdas de Imagen */

.image-cell img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-cell:hover img {
    transform: scale(1.05); /* Efecto zoom suave */
}

/* Celdas de Contenido (Misión / Visión) */

.content-cell {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center;
    padding: 40px;
    background-color: #fff;
}

.cell-content {
    max-width: 350px; /* Limitar ancho del texto para lectura */
}

/* Encabezado con Icono Cuadrado */

.header-icon-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.square-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-rosa { background-color: #ea5c83; background-color: var(--c-rosa); }

.icon-turquesa { background-color: #48b5c4; background-color: var(--c-turquesa); }

.header-icon-row h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    color: var(--c-texto);
}

.cell-content p {
    font-size: 0.95rem;
    color: #555;
    color: var(--c-texto-p);
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE --- */

/* Tablets (Apilamos Izquierda arriba, Derecha abajo) */

@media (max-width: 1024px) {
    .inside-wrapper {
        grid-template-columns: 1fr; /* Una sola columna grande */
    }

    .inside-left-hero {
        height: 400px; /* Altura fija para la imagen principal */
    }
    
    .inside-right-grid {
        /* Mantenemos el grid 2x2 en tablets, se ve bien */
        height: auto; 
    }
    
    .grid-cell {
        min-height: 300px; /* Altura mínima para celdas en tablet */
    }
}

/* Móviles (Todo en una columna vertical) */

@media (max-width: 600px) {
    .hero-quote-box {
        width: 85%;
        padding: 20px;
    }
    
    .hero-quote-box p {
        font-size: 1.3rem;
    }

    .inside-right-grid {
        /* Rompemos el 2x2, hacemos todo lista vertical */
        grid-template-columns: 1fr; 
        grid-template-rows: auto;
    }

    /* Reordenamos para móvil si quieres (Texto, Foto, Texto, Foto) 
       o lo dejamos natural (Texto, Foto, Foto, Texto) */
    
    .content-cell {
        padding: 40px 20px;
        min-height: auto; /* Altura automática según texto */
    }
    
    .image-cell {
        height: 250px; /* Altura fija para fotos en móvil */
    }
}

/****************************************
COMMON PAGES STYLES
*****************************************/

/* --- VARIABLES --- */

:root {
    --c-rosa: #ea5c83;
    --c-turquesa: #48b5c4;
    --c-texto: #333;
    --c-gris-texto: #555;
    --c-borde-gris: #ccc;
}

.convenios-section {
    padding-top: 1rem;
    padding-bottom: 80px;
    background-color: #fff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   PARTE SUPERIOR (Info + Form)
   ========================================= */

.convenios-top-row {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 60px;
}

/* Columna Izquierda */

.convenios-info-col {
    flex: 1;
    text-align: center; /* Centrado como en la imagen */
}

.convenios-hero-img {
    margin: 0 auto 30px;
    max-width: 400px; /* Tamaño controlado de la imagen de doctores */
}

.convenios-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    /* Recorte estilo silueta si la imagen es PNG transparente, 
       si es JPG rectangular se verá rectangular */
}

.convenios-title {
    font-size: 1.6rem;
    color: #333;
    color: var(--c-texto);
    margin-bottom: 15px;
    font-weight: 500;
}

.convenios-title i {
    color: #ea5c83;
    color: var(--c-rosa); /* El Check rosado */
    margin-right: 8px;
}

.convenios-title strong {
    font-weight: 800;
}

.divider-pink {
    width: 100%;
    height: 1px;
    background-color: #ea5c83;
    background-color: var(--c-rosa);
    margin: 20px 0;
}

.convenios-desc {
    color: #555;
    color: var(--c-gris-texto);
    font-size: 1rem;
    margin-bottom: 15px;
}

.convenios-cta-text {
    color: #333;
    color: var(--c-texto);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Columna Derecha (Formulario) */

.convenios-form-col {
    flex: 1;
    max-width: 500px; /* Ancho máximo de la tarjeta blanca */
}

.card-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); /* Sombra suave */
    border: 1px solid #f0f0f0;
}

/* --- PERSONALIZACIÓN CONTACT FORM 7 (CF7) --- */

/* Forzamos estilos para que parezca el diseño */

.card-form-wrapper label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 5px;
}

/* Inputs y Textareas: Solo borde inferior */

.card-form-wrapper .wpcf7-form-control-wrap input,
.card-form-wrapper .wpcf7-form-control-wrap textarea {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-bottom: 1px solid var(--c-borde-gris) !important;
    background: transparent !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    outline: none !important;
}

.card-form-wrapper .wpcf7-form-control-wrap input,
.card-form-wrapper .wpcf7-form-control-wrap textarea {
    width: 100%;
    font-size: 1rem;
    color: #555;
    transition: border-color 0.3s;
}

.card-form-wrapper .wpcf7-form-control-wrap input:focus,
.card-form-wrapper .wpcf7-form-control-wrap textarea:focus {
    border-bottom-color: #48b5c4 !important;
    border-bottom-color: var(--c-turquesa) !important;
}

.card-form-wrapper .wpcf7-form-control-wrap textarea {
    height: 40px; /* Altura inicial pequeña */
    resize: vertical;
}

/* Botón Submit */

.card-form-wrapper input[type="submit"] {
    background-color: #ea5c83 !important;
    background-color: var(--c-rosa) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 10px 40px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.card-form-wrapper input[type="submit"] {
    border: solid 1px #E54C78;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto; /* Centrado */
}

.card-form-wrapper input[type="submit"]:hover {
    background-color: #fff !important;
    color: #E54C78 !important;
}

/* =========================================
   PARTE MEDIA (Banner Turquesa)
   ========================================= */

.convenios-banner {
    background-color: none;
    /* Imagen de fondo sutil con mezcla */
    background-image: url('https://images.unsplash.com/photo-1576091160550-21733e99dbb9?auto=format&fit=crop&w=1500&q=80');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* Mezcla el turquesa con la foto */
    padding: 1rem;
    text-align: center;
    color: #41B9C0;
    margin-bottom: 60px;
}

.convenios-banner h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
}

/* =========================================
   PARTE INFERIOR (Grilla Beneficios)
   ========================================= */

.convenios-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    gap: 30px;
    text-align: center;
}

.benefit-card h3 {
    font-size: 1.1rem;
    color: #333;
    color: var(--c-texto);
    margin: 15px 0 5px;
    font-weight: 600;
}

.benefit-price {
    display: block;
    color: #ea5c83;
    color: var(--c-rosa);
    font-weight: 700;
    font-size: 1.1rem;
}

.benefit-img {
    width: 100%;
    aspect-ratio: 4/3; /* Proporción rectangular */
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}

.benefit-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s;
}

.benefit-card:hover .benefit-img img {
    transform: scale(1.05);
}

/* =========================================
   RESPONSIVE
   ========================================= */

/* Tablet y pantallas medianas */

@media (max-width: 900px) {
    .convenios-top-row {
        flex-direction: column;
        align-items: center;
    }

    .convenios-info-col, 
    .convenios-form-col {
        width: 100%;
        max-width: 100%;
    }

    .convenios-benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 40px;
    }
}

/* Móvil */

@media (max-width: 600px) {
    .convenios-banner h2 {
        font-size: 1.5rem;
    }

    .convenios-benefits-grid {
        grid-template-columns: 1fr; /* 1 columna */
    }
    
    .card-form-wrapper {
        padding: 25px;
    }
}

/****************************************
PAGE: Contacto
*****************************************/

.container-form-page{
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
        padding: 40px;
    border-radius: 15px; /* Bordes redondeados de la tarjeta */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra suave */
}

.contact-centros-header{
    padding: 2rem 1rem;
}

.contact-centros-header h2{
        font-size: 1.5rem;
        text-align: center;
        font-weight: 500;
    }

.centros-contact{
    max-width: 680px;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    
}

.social-contact .nav-social{
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        gap: 2rem;
    }

.social-contact .nav-social a{
            color: #fff;

        }

.social-contact .nav-social a i{
            font-size: 3rem;
            }

.social-contact .nav-social a:hover{
                color: #E54C78;
            }

@media (min-width: 48em) {

    .if-mobile-d-none {
        display: block;
    }
}

@media (min-width: 48em) {

    .if-desktop-d-none {
        display: none;
    }
}

@media (min-width: 62em) {

    main {
        margin-top: 0px;
    }
}

@media (min-width: 48em) {

    .container {
        padding: 1.25rem;
    }
}

@media (min-width: 80em) {

    .container {
        padding: 1.5rem;
    }
}

@media (min-width: 48em) {

    .grid {
        gap: 1.25rem;
    }
}

@media (min-width: 80em) {

    .grid {
        gap: 1.5rem;
    }
}

@media (min-width: 48em) {

    .flex-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 80em) {

    .flex-grid {
        gap: 1.5rem;
    }
}

@media (min-width: 48em) {

    .even-flex {
        flex-direction: row;
    }
}

@media (min-width: 48em) {

    .nav-icons, .nav-social {
        gap: 1.25rem;
    }
}

@media (min-width: 80em) {

    .nav-icons, .nav-social {
        gap: 1.5rem;
    }
}

@media (min-width: 48em) {

    .contact-form {
        max-width: 50%;
    }
}

@media (min-width: 62em) {

    #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 1rem;
    }
}

@media (min-width: 48em) {

    #mega-menu-wrap-principal #mega-menu-principal > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        color: #243436;
    }
}

@media (min-width: 40em) {

    #cgf-filter-sidebar {
        display: block;
    }
}

@media (min-width: 48em) {

    .slider .slick-next:before, .slider .slick-prev:before {
        font-size: 2rem;
    }
}