/*
Theme Name: LayoutLynx Theme
Theme URI: https://layoutlynx.com/
Author: Eze Jaime
Author URI: https://ezejaime.design/
Description: Custom theme for LayoutLynx landing sites
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: layoutlynx-theme
*/

 html
        {
            scroll-behavior: smooth;                
        }
        
        html, body
        {
           width: 100%; height: auto; margin: 0; padding: 0
        }
        
        body
        {
           font-size:16px;
           font-family: "Manrope", sans-serif;
           font-optical-sizing: auto;
           font-style: normal;
           background: rgba(250,243,224,1);
            color: rgba(42,42,42,1);
          
        }

        
        
        header,main
        {
            width: 90%;
            max-width: 1144px;
            margin: 0 auto;
        }
        
        header
        {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5em 0;
        }
        
        section
        {
            padding: 3em 0 0; margin: 0;
        }
        
        h1,h2
        {
            font-family:  'Caprasimo', serif;
            font-weight: normal
        }
        
        h1
        {
           font-size: 4em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
        
        h2
        {
           font-size: 3em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
        
         h3
        {
           font-size: 1.5em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
        
        .text-link:link,.text-link:active, .text-link:visited{color: #D2691E; text-decoration: none; transition: all 3s}
        .text-link:hover{border-bottom: 1px solid #D2691E}
        
        p
        {
            margin: 0;
            padding: .8em 0 0;
            line-height: 1.5em
        }
        
        #logo img
        {
            width: 100%;
            max-width: 360px;
            height: auto;
        }
        
        .card
        {
            background: #FFFCF3;
            border-radius: 1rem;
            box-shadow: 0 20px 50px rgba(181,122,70,.15);
        }
        
        header nav ul
        {
            display: flex;
            justify-content: space-between;
            list-style-type: none;
            font-weight: 700;
            padding: 20px 30px;
            column-gap: 20px;
        }
        
        header nav ul li a 
        {
            text-decoration: none;
            
            color: rgba(210,105,30,1);
            transition: all .3s;
        }
        
         header nav ul li a:hover 
        {
            color: rgba(42,42,42,1);
        }
        
        #hero
        {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px;
            column-gap: 0%;
            border-radius: 30px;
            margin-bottom: 2em;
            gap:5%;
        }
        
        #hero .right-col
        {
            
        }
        
        #hero .left-col
        {
            width: 60%;
            
        }
        
        #hero p
        {
            font-size: 20px;
        }
        
        #hero .right-col img { width: 100%}
        
        .cta-button, .order-button, #place_order, .button
        {
            display: inline-flex;
            font-family: 'Caprasimo', serif;
            transition: all .3s;
            padding: 20px 60px;
            text-decoration: none;
            font-size: 1.5em;
            border-radius: 8px;
            text-align: center;
            width: auto;
            margin-top: 1em;
            border: 0;
            outline: 0;
            cursor:pointer
        }

.button, #place_order, .woocommerce-form-login__submit{font-size: 16px !important; padding:.7em 1.4em !important; margin: 0 !important; border-radius:5px !important; font-family:"Manrope", sans-serif !important; font-weight: 800 !important; }

        
        .order-button
        {
           display: block;
           margin: .5em auto;
            cursor: pointer;
        }


    
        
        .cta-primary-teal
        {
            background: #5A7D7C;
            color: #FFFCF3;
            
        }
        
        .cta-primary-teal:hover
        {
            background: #2a2a2a;
        }
        
       
        
         .cta-primary-orange, #place_order, .button, .woocommerce-form-login__submit
        {
            background: #D2691E;
            color: #FFFCF3;
            
        }

        #place_order{background: #00457c; margin-top: 20px}
        
        .cta-primary-orange:hover, #place_order:hover, .button:hover, .woocommerce-form-login__submit:hover
        {
            background: #2a2a2a;
        }
        
         .cta-primary-green
        {
            background: #708238;
            color: #FFFCF3;
            
        }
        
        .cta-primary-green:hover
        {
            background: #2a2a2a;
        }
        
         .cta-primary-yellow
        {
            background: #EFCB68;
            color: #FFFCF3;
            
        }
        
        .cta-primary-yellow:hover
        {
            background: #2a2a2a;
        }
        
 .cta-secondary
        {
            background: rgba(250,243,224,1);
            color: #5A7D7C;
        }
        
         .cta-secondary:hover
        {
            color: #2a2a2a;
        }
        
          .three-cols
        {
            display: flex;
            align-items: top;
            justify-content: space-between;
            width: 100%;
            list-style-type: none;
            gap: 2%;
            margin: 0;
            padding: 1em 0
        }
        
        .three-cols > div
        {
            
           
            flex-basis: 0;
  flex-grow: 1;
  max-width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
        }
        
          .plan
        {
            padding: 2.6em 1.3em 2em;
            
            
        }
    
        .plan ul {padding: 0 0 0 30px}
        .plan ul li {padding-top:10px}


        .plan-content {
          display: flex;
          flex-direction: column;
          justify-content: start;
          height: 100%;
         
        }

        .plan-description {
          margin-bottom: 1rem;
        }

        .purchase-area {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .four-cols
        {
            display: flex;
            align-items:flex-start;
            justify-content: space-between;
            width: 100%;
            list-style-type: none;
            gap: 3%;
            margin: 0;
            padding: 2em 0
        }
        
        .four-cols article
        {
            
         flex-basis: 0;
          flex-grow: 1;
          max-width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        
        .item {text-align: center

}
        
        .item img
        {
            width: 60%;
            max-width: 120px;
            padding: 1em 0;
            margin: auto;
        }
        
      #team .item img
        {
            width: 70%;
            max-width: 160px;
            padding: 1em 0;
            margin: auto;
        }
        
        .site-footer {
          background: #2a2a2a;
          color: rgba(250,243,224,1);
          padding: 3rem 1rem;
          font-size: 0.95rem;
        }

        .site-footer .container {
          display: flex;
          column-gap: 5%;
          justify-content: space-between;
          margin: 0 auto;
          width: 90%;
          max-width: 1144px;
        }

        .footer-col {
          
        }

        .footer-col h4 {
          font-size: 1.25em;
          margin-bottom: 0.5rem;
          color: #D2691E; /* acento cálido retro */
        }

        .footer-col ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .footer-col a {
          color: rgba(250,243,224,1);
          text-decoration: none;
        }

        .footer-col a:hover {
          text-decoration: underline;
        }
        
.custom-select {
  position: relative;
    text-align: center;
    width: 100%;
}

.custom-select select, .input-text, .woocommerce form input[type=text], .form-row  input[type=text] {
  appearance: none;
width: 100%;
font-family: 'Manrope',sans-serif;
  font-size: 16px;
  padding: 0.675em 1em 0.675em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.custom-select::before,
.custom-select::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}
      
/*.woocommerce-errir[role="alert"],.woocommerce-message[role="alert"],.woocommerce-NoticeGroup-checkout,.woocommerce-info {
  display: none !important;
}  */

.col2-set::before{content:none !important}



.shop_table  td {text-align: right}

.shop_table, .woocommerce-checkout-review-order-table{
    text-align: left !important;
    width:100%;
    padding: 15px 0;
}

.product-name {text-align: left !important;}
.shop_table thead, .cart-subtotal{display: none}

.woocommerce-checkout #payment {
  background: #FAF3E0;
  border-radius: 10px;
}

.woocommerce-MyAccount-navigation ul {list-style-type: none; margin: 0; padding: 0}

.woocommerce-MyAccount-navigation ul li a{padding: 1em 2em; margin-bottom: 10px; background: transparent; color: #2a2a2a; display: block; text-decoration: none; transition: all .3s; border-radius: 0; max-width: 150px; font-weight: 500; border-bottom: 2px solid #2a2a2a;}
.woocommerce-MyAccount-navigation ul li a:hover{color: #2a2a2a; border-bottom-color:#D2691E }

.woocommerce-MyAccount-content a:link, .woocommerce-MyAccount-content a:active, .woocommerce-MyAccount-content a:visited{color: #D2691E}

.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #D2691E;
border-bottom-color:#D2691E; 
  font-weight: 700;
}

 .woocommerce form.login, .woocommerce form.register {
    border: none;
    padding: 0px;
    margin: 2em 0;
    text-align: left;
    border-radius: 0;
}

.woocommerce-MyAccount-navigation-link--downloads,.woocommerce-MyAccount-navigation-link--customer-logout  {display: none}

.woocommerce form.login h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 1.5rem;
}

.woocommerce form.login .input-text,
.woocommerce form.login input[type="password"] {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.woocommerce form.login .input-text:focus,
.woocommerce form.login input[type="password"]:focus {
  border-color: #D2691E;
  outline: none;
}

.woocommerce form.login .button {
  background-color: #D2691E;
  color: #FFFCF3;
  border: none;
  padding: 0.9em 1.5em;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.woocommerce form.login .button:hover {
  background-color: #2a2a2a;
}

.woocommerce .woocommerce-LostPassword a {
  font-size: 0.95em;
  color: #D2691E;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.woocommerce .woocommerce-LostPassword a:hover {
  color: #2a2a2a;
}

.woocommerce-form-coupon-toggle{display: none !important}

@media only screen and (max-width: 768px) {
    .desktop {display: none !important}
    header, #hero{display: block;}
    #hero div {width: 100% !important; display: block !important}
    section {padding: 0; margin-bottom: 2em !important}
    header {padding: 1em 0 0 }
    #hero, .card{padding: 40px 30px !important}
    header .card {padding: 20px 30px !important}
    #hero div img {margin: 0 !important; padding-top: 1em}
    .cta-button {display: block; width: auto !important;}
    .wrapper {width: auto !important; padding: 20px 0 0 !important}
    .four-cols, .three-cols {width: 100% !important; display: block !important}
    .four-cols .item, .three-cols > div {max-width: none }
    .plan {margin-bottom: 1em}
    .col2-set > div {display: block; width: 100%;}
    .col2-set .col-2{padding-top: 30px}
    
    #place_order{text-align: center !important;}
    .button,#coupon_code{display: block}
    .plan-content {
         
          height: auto;
        }
    .site-footer .container {flex-direction: column;}
     h1
        {
           font-size: 2.8em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
        
        h2
        {
           font-size: 2.8em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
        
         h3
        {
           font-size: 1.5em;
            line-height: 1em;
            margin: 0;
            padding: 0;
        

}