/* ============================================
   IRENEVIRTUAL — STYLE.CSS
   Sections:
   1. Reset & Variables
   2. Body
   3. Nav
   4. Hero
   5. Sections (general)
   6. For You
   7. Method
   8. Services
   9. Contact
   10. Footer
   11. Language
   12. Mobile
============================================ */

/* 1. RESET & VARIABLES
   - Removes default spacing from all elements
   - Defines brand colors as named variables
   - Change colors here and they update everywhere */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:light;
  --rose:#b56f7c;
  --gold:#cda86e;
  --teal:#2f818f;
  --bg:#f9f6f3;
  --text:#4a3f3a;
  --muted:#7c706a;
  --light:#eed6d3;
  --cream:#e4d0b2;
}

/* 2. BODY
   - Sets default font for the whole page
   - Sets background and text color */
body{font-family:'Jost',sans-serif;background:var(--bg);color:var(--text);font-weight:300;line-height:1.7}
a{color:var(--text);text-decoration:none}

/* 3. NAV */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:64px;
  padding:0 clamp(1rem, 4vw, 2.5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f9f6f3;
  color:#4a3f3a;
  border-bottom:0.5px solid rgba(181,111,124,0.15);
}
.nav-logo img{height:clamp(28px, 4vw, 36px);width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:clamp(0.8rem, 2vw, 1.5rem)}
nav .nav-links a{
  font-family:'Jost',sans-serif;
  font-size:clamp(0.55rem, 0.8vw, 0.65rem);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:400;
  color:#4a3f3a !important;
  text-decoration:none;
  white-space:nowrap;
}
nav .nav-links a:hover{color:#b56f7c}
/* Hamburger — hidden on desktop */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:4px}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;transition:all 0.25s}
.nav-hamburger-active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-hamburger-active span:nth-child(2){opacity:0}
.nav-hamburger-active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

.lang-switcher{display:flex;gap:0.3rem}
.lang-btn{
  font-family:'Jost',sans-serif;
  font-size:0.65rem;
  letter-spacing:0.08em;
  padding:0.25rem 0.5rem;
  border:1px solid #b56f7c;
  background:none;
  cursor:pointer;
  color:#4a3f3a !important;
  font-weight:400;
  transition:all 0.2s;
}
.lang-btn.active{background:#b56f7c;border-color:#b56f7c;color:white !important}
.lang-btn:hover:not(.active){border-color:#b56f7c;color:#b56f7c}

/* 4. HERO
   - Two columns: text on the left, image on the right
   - Full height of the screen
   - Gradient background on the right side */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:64px}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem)}
.hero-tag{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:1.5rem}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem, 5vw, 3.8rem);line-height:1.1;font-weight:300;margin-bottom:1.5rem;color:var(--text)}
.hero-title strong{font-weight:600;color:var(--rose);font-style:italic}
.hero-sub{font-size:clamp(0.88rem, 1.2vw, 1rem);color:var(--muted);max-width:420px;margin-bottom:2.5rem;line-height:1.8}
.btn-primary{display:inline-block;background:var(--rose);color:white;padding:0.9rem 2.2rem;font-size:clamp(0.7rem, 1vw, 0.8rem);letter-spacing:0.12em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:400;transition:background 0.2s;border:none;cursor:pointer}
.btn-primary:hover{background:#a05e6a}
.btn-secondary{display:inline-block;color:var(--rose);padding:0.9rem 2.2rem;font-size:clamp(0.7rem, 1vw, 0.8rem);letter-spacing:0.12em;text-transform:uppercase;font-family:'Jost',sans-serif;border:0.5px solid var(--rose);margin-left:1rem;transition:all 0.2s}
.btn-secondary:hover{background:var(--rose);color:white}
.hero-right{background:linear-gradient(135deg,#eed6d3 0%,#e4d0b2 60%,#ceada8 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-logo-wrap{width:clamp(150px, 20vw, 220px);height:clamp(150px, 20vw, 220px);display:flex;align-items:center;justify-content:center}
.hero-logo-wrap img{width:100%;height:100%;object-fit:contain}
.hero-deco{position:absolute;width:300px;height:300px;border-radius:50%;border:0.5px solid rgba(181,111,124,0.2);top:-50px;right:-50px}
.hero-deco2{position:absolute;width:200px;height:200px;border-radius:50%;border:0.5px solid rgba(205,168,110,0.25);bottom:40px;left:40px}

/* 5. SECTIONS (GENERAL)
   - Padding applied to all sections equally */
section{padding:clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem)}
.section-tag{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem, 3.5vw, 2.6rem);font-weight:300;margin-bottom:1.5rem;line-height:1.2}
.section-title em{font-style:italic;color:var(--rose)}

/* 6. FOR YOU
   - Two columns: list on left, quote on right
   - White background */
.foryou{background:white}
.foryou-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);align-items:center}
.foryou-list{list-style:none;margin-top:2rem}
.foryou-list li{padding:1rem 0;border-bottom:0.5px solid var(--light);display:flex;align-items:flex-start;gap:1rem;font-size:clamp(0.85rem, 1.1vw, 0.95rem);color:var(--muted)}
.foryou-list li:last-child{border-bottom:none}
.foryou-list li::before{content:'';width:6px;height:6px;background:var(--rose);border-radius:50%;margin-top:0.55rem;flex-shrink:0}
.foryou-right{background:var(--bg);padding:clamp(1.5rem, 3vw, 3rem)}
.foryou-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem, 2vw, 1.6rem);font-style:italic;font-weight:300;line-height:1.5;color:var(--text)}
.foryou-quote::before{content:'\201C';font-size:4rem;color:var(--light);line-height:0;vertical-align:-1.5rem;margin-right:0.2rem;font-family:'Cormorant Garamond',serif}

/* 7. METHOD
   - Four steps in a row
   - Each step has a number, title and description */
.method{background:var(--bg)}
.method-steps{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:clamp(1rem, 2vw, 2rem);margin-top:3rem}
.step{padding:clamp(1.5rem, 2vw, 2rem);border-top:2px solid var(--light);transition:border-color 0.3s}
.step:hover{border-top-color:var(--rose)}
.step-num{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem, 3.5vw, 3rem);color:var(--light);font-weight:300;line-height:1;margin-bottom:0.5rem}
.step-title{font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);margin-bottom:0.75rem;font-weight:400}
.step-desc{font-size:clamp(0.82rem, 1vw, 0.9rem);color:var(--muted);line-height:1.7}

/* 8. SERVICES
   - Three cards side by side
   - Rose line animates at the bottom on hover */
.services{background:white}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:clamp(1rem, 2vw, 2rem);margin-top:3rem}
.service-card{padding:clamp(1.5rem, 3vw, 2.5rem);border:0.5px solid var(--light);position:relative;overflow:hidden;transition:border-color 0.3s}
.service-card:hover{border-color:var(--rose)}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--rose);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.service-card:hover::after{transform:scaleX(1)}
.service-icon{width:40px;height:2px;background:var(--gold);margin-bottom:1.5rem}
.service-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem, 2vw, 1.6rem);font-weight:400;margin-bottom:1rem;color:var(--text)}
.service-desc{font-size:clamp(0.82rem, 1vw, 0.9rem);color:var(--muted);line-height:1.8;margin-bottom:1.5rem}
.service-tag{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal)}

/* 9. CONTACT
   - Rose background with white text
   - Two columns: info on left, tagline on right */
.contact{background:var(--rose);color:white}
.contact .section-tag{color:rgba(255,255,255,0.6)}
.contact .section-title{color:white}
.contact .section-title em{color:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);align-items:center}
.contact-item{padding:1.2rem 0;border-bottom:0.5px solid rgba(255,255,255,0.2)}
.contact-item:last-child{border-bottom:none}
.contact-label{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:0.2rem}
.contact-value{font-size:1rem;color:white}
.contact-buttons{display:flex;gap:0.8rem;margin-top:2rem;flex-wrap:wrap}
.contact-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1rem;background:rgba(255,255,255,0.15);color:white;font-size:0.75rem;letter-spacing:0.08em;border:0.5px solid rgba(255,255,255,0.3);transition:all 0.2s;font-family:'Jost',sans-serif}
.contact-btn:hover{background:rgba(255,255,255,0.25)}
.contact-btn-whatsapp{background:rgba(37,211,102,0.2);border-color:rgba(37,211,102,0.4)}
.contact-tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem, 2.5vw, 2rem);font-style:italic;font-weight:300;color:rgba(255,255,255,0.85);line-height:1.5}

/* 10. FOOTER
   - Dark background, centered layout
   - Logo, nav links, social icons, copyright stacked vertically */
footer{background:#2a1f1e;padding:clamp(2.5rem, 4vw, 4rem) 2rem clamp(2rem, 3vw, 3rem)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.footer-logo img{width:clamp(160px, 20vw, 220px);height:auto}
.footer-nav{display:flex;flex-wrap:wrap;gap:0.5rem 2rem;justify-content:center}
.footer-nav a{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);transition:color 0.2s}
.footer-nav a:hover{color:rgba(255,255,255,0.9)}
.footer-social{display:flex;gap:0.8rem}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:rgba(255,255,255,0.5);border:0.5px solid rgba(255,255,255,0.2);border-radius:50%;transition:all 0.2s}
.footer-social a:hover{color:white;border-color:rgba(255,255,255,0.6)}
.footer-copy{font-size:0.72rem;color:rgba(255,255,255,0.3);border-top:0.5px solid rgba(255,255,255,0.1);padding-top:1.5rem;width:100%;text-align:center}

/* 11. LANGUAGE
   - Hides all language versions by default
   - .show class makes the correct language visible
   - -i suffix is for inline elements (spans) */
.lang-es,.lang-en,.lang-ca{display:none}
.lang-es.show,.lang-en.show,.lang-ca.show{display:block}
.lang-es-i,.lang-en-i,.lang-ca-i{display:none}
.lang-es-i.show,.lang-en-i.show,.lang-ca-i.show{display:inline}

/* 12. NAV ACTIVE STATE */
.nav-link-active{color:var(--rose) !important}

/* 13. PAGE HERO (interior pages) */
.page-hero{
  padding:clamp(6rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem) clamp(2rem, 4vw, 3rem);
  text-align:center;
  background:var(--bg);
  border-bottom:0.5px solid var(--light);
}
.page-hero .section-tag{margin-bottom:0.8rem}
.page-hero .section-title{max-width:600px;margin:0 auto 1rem}

/* 14. ABOUT PAGE */
.about-story{background:white}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);align-items:center}
.about-text{font-size:clamp(0.88rem, 1.1vw, 1rem);color:var(--muted);line-height:1.8}
.about-text p{margin-bottom:1.5rem}
.about-deco{background:linear-gradient(135deg,#eed6d3 0%,#e4d0b2 60%,#ceada8 100%);min-height:300px;display:flex;align-items:center;justify-content:center}
.about-deco img{width:clamp(120px, 15vw, 180px);height:auto}
.about-values{background:var(--bg)}
.about-values-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:clamp(1rem, 2vw, 2rem);margin-top:3rem}
.value-card{padding:clamp(1.5rem, 2vw, 2rem);border-top:2px solid var(--light);transition:border-color 0.3s}
.value-card:hover{border-top-color:var(--rose)}
.value-title{font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);margin-bottom:0.75rem;font-weight:400}
.value-desc{font-size:clamp(0.82rem, 1vw, 0.9rem);color:var(--muted);line-height:1.7}
.about-cta{background:white;text-align:center}

/* 14b. TOOLS SECTION */
.tools{background:white}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);align-items:center}
.tools-intro{font-size:clamp(0.88rem, 1.1vw, 1rem);color:var(--muted);line-height:1.7}
.tools-list{list-style:none;columns:2;column-gap:2rem}
.tools-list li{padding:0.8rem 0;border-bottom:0.5px solid var(--light);display:flex;flex-direction:column;gap:0.2rem;break-inside:avoid}
.tools-list li:first-child{border-top:0.5px solid var(--light)}
.tool-category{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);font-weight:400}
.tool-name{font-size:clamp(0.88rem, 1.1vw, 1rem);color:var(--text)}

/* 15. PRICING PAGE */
.pricing-cards{background:white}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:clamp(1rem, 2vw, 2rem);margin-top:3rem}
.pricing-card{padding:clamp(1.5rem, 3vw, 2.5rem);border:0.5px solid var(--light);position:relative;overflow:hidden;transition:border-color 0.3s;display:flex;flex-direction:column}
.pricing-card:hover{border-color:var(--rose)}
.pricing-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--rose);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.pricing-card:hover::after{transform:scaleX(1)}
.pricing-card .service-icon{width:40px;height:2px;background:var(--gold);margin-bottom:1.5rem}
.pricing-card .service-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem, 2vw, 1.6rem);font-weight:400;margin-bottom:1rem;color:var(--text)}
.pricing-card .service-desc{font-size:clamp(0.82rem, 1vw, 0.9rem);color:var(--muted);line-height:1.8;margin-bottom:1.5rem;flex-grow:1}
.pricing-price{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem, 2vw, 1.8rem);color:var(--rose);font-weight:400;margin-bottom:1.5rem}
.pricing-features{list-style:none;margin-bottom:2rem}
.pricing-features li{padding:0.5rem 0;border-bottom:0.5px solid var(--light);font-size:clamp(0.82rem, 1vw, 0.88rem);color:var(--muted);display:flex;align-items:center;gap:0.5rem}
.pricing-features li::before{content:'';width:5px;height:5px;background:var(--rose);border-radius:50%;flex-shrink:0}

/* 16. TESTIMONIALS PAGE */
.testimonials-soon{background:white;text-align:center;min-height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.testimonials-deco{font-family:'Cormorant Garamond',serif;font-size:clamp(6rem, 12vw, 10rem);color:var(--light);line-height:1;margin-bottom:1rem}
.testimonials-msg{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem, 3vw, 2.4rem);font-weight:300;font-style:italic;color:var(--text);margin-bottom:1rem}
.testimonials-sub{font-size:clamp(0.85rem, 1.1vw, 1rem);color:var(--muted);margin-bottom:2.5rem;max-width:500px}
.testimonial-card{padding:clamp(1.5rem, 3vw, 2.5rem);border:0.5px solid var(--light);background:white}
.testimonial-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem, 1.5vw, 1.3rem);font-style:italic;font-weight:300;line-height:1.6;color:var(--text);margin-bottom:1rem}
.testimonial-name{font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--rose);font-weight:400}

/* 17. FAQ PAGE */
.faq-section{background:white}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:0.5px solid var(--light)}
.faq-item summary{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight:400;
  color:var(--text);
  padding:1.5rem 2rem 1.5rem 0;
  cursor:pointer;
  position:relative;
  list-style:none;
  line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:'Jost',sans-serif;
  font-size:1.2rem;
  font-weight:300;
  color:var(--rose);
  transition:transform 0.2s;
}
.faq-item[open] summary::after{
  content:'\2212';
}
.faq-answer{
  padding:0 0 1.5rem;
}
.faq-answer p{
  font-size:clamp(0.85rem, 1.1vw, 0.95rem);
  color:var(--muted);
  line-height:1.8;
}

/* 18. BOOKING */
.booking-section{background:white;text-align:center}
.booking-desc{font-size:clamp(0.88rem, 1.1vw, 1rem);color:var(--muted);max-width:500px;margin:0 auto 2.5rem;line-height:1.7}

/* 18. MOBILE
   - Only layout changes that clamp() can't handle */
@media(max-width:768px){
  nav{height:56px;flex-wrap:nowrap;gap:0;padding-top:0;padding-bottom:0}
  .nav-logo{order:1}
  .lang-switcher{order:2;margin-left:auto;margin-right:0.5rem}
  .nav-hamburger{display:flex;order:3}
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:56px;left:0;right:0;
    background:#f9f6f3;
    border-bottom:0.5px solid rgba(181,111,124,0.15);
    padding:1rem 0;gap:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }
  .nav-links.nav-open{display:flex}
  .nav-links a{padding:0.6rem 1.5rem;font-size:0.75rem !important}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:100px}
  .hero-right{height:280px}
  .btn-primary.show,.btn-secondary.show{display:block;text-align:center;margin:0 0 0.8rem 0}
  .btn-secondary{margin-left:0}
  .foryou-grid,.contact-grid,.about-grid,.tools-grid{grid-template-columns:1fr}
  .tools-list{columns:1}
  .contact-buttons{flex-direction:column}
  .page-hero{padding-top:100px}
}