/* Table of Contents
--------------------------------------------------
1. Reset & Base Styles
2. Variables
3. Utility Classes
4. Typography
5. Buttons
6. Header
7. Hero Section
8. Benefits Section
9. How It Works Section
10. FAQ Section
11. Footer
12. Modal
13. Animations & Transitions
14. Responsive Styles (Media Queries)
-------------------------------------------------- */

/* 1. Reset & Base Styles
-------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size for rem units */
}

body {
    font-family: 'Roboto', sans-serif;
    /*line-height: 1.6;*/
    line-height: 1.3; /* Modificado por KMMF */
    color: #1A202C; /* Default text color (Black from your Figma) */
    background-color: #FFFFFF; /* Default background */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

input,
button,
textarea,
select {
    font: inherit;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    background: none;
}

.container {
    width: 90%;
    max-width: 1280px; /* Matches Figma main content width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 2. Variables (Based on Figma)
-------------------------------------------------- */
:root {
    --color-primary: #FB7E14; /* Orange */
    --color-primary-darker: #e06c0a;
    --color-secondary: #EFB810; /* Yellow */
    --color-text-dark: #151515;
    --color-text-light: #FFFFFF;
    --color-text-subtle: #5A5A5A;
    --color-background-light: #FFFFFF;
    --color-background-medium: #FEF8E8; /* Light peach/beige */
    --color-background-dark: #000000;
    --color-border: #DDDDDD;

    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --font-accent: 'Nico Moji', cursive; /* For "Agente Virtual" */

    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 20px;
    --border-radius-pill: 100px;

    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-button: 0px 4px 4px rgba(0, 0, 0, 0.25);

    --header-height: 80px; /* Adjusted from 100px for better mobile */
}


/* 3. Utility Classes
-------------------------------------------------- */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.d-flex {
    display: flex;
}
.align-items-center {
    align-items: center;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-between {
    justify-content: space-between;
}
.highlighted-text { /* For the "Agente Virtual" in Hero */
    background-color: var(--color-secondary);
    padding: 0.1em 0.3em;
    font-family: var(--font-accent);
    color: var(--color-text-dark);
    opacity: 0.85; /* Figma had opacity: 0.77 */
    display: inline-block; /* Keeps background tight to text */
    line-height: 1.1; /* Adjust for Nico Moji if needed */
}
.highlight-lilu { /* For "LILU" text in subtitles */
    background-color: var(--color-secondary);
    padding: 0.1em 0.2em;
    font-weight: 700;
    color: var(--color-text-dark);
    border-radius: 3px;
}
.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-header h2 {
    font-size: clamp(2rem, 5vw, 3rem); /* H1 in Figma 48px */
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
    margin-bottom: 0.5em;
}
.section-header .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* H3_24 in Figma */
    font-weight: 600;
    color: var(--color-text-dark);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Typography (Using Figma values as reference)
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

h1 { /* Hero title */
    font-size: clamp(2.2rem, 6vw, 3rem); /* Figma 48px */
    line-height: 1.212; /* or 58px */
}

h2 { /* Section titles */
    font-size: clamp(2rem, 5vw, 3rem); /* Figma 48px, some H2s in Figma are 24px or 32px */
}

h3 { /* Card titles, etc. */
    font-size: clamp(1.25rem, 3vw, 1.5rem); /* Figma 20px or 24px */
    font-weight: 600;
}

p {
    font-size: 1rem; /* 16px */
    margin-bottom: 1em;
}

.hero-description {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Figma 24px */
    font-weight: 600;
    margin-bottom: 1.5em;
}

.lilu-sabe { /* Text "Lilu sabe" in FAQs */
    color: var(--color-primary);
    font-weight: 600;
    margin-left: 5px;
}


/* 5. Buttons
-------------------------------------------------- */
.btn {
    display: inline-flex; /* For aligning icon and text */
    justify-content: center;
    align-items: center;
    /*padding: 12px 30px; /* Adjusted for better feel */
    padding: 8px 20px; /* Modificado por KMMF */
    font-size: 1rem; /* Default to 16px, Hero is 24px */
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    min-width: 180px; /* Minimum width for consistency */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-dark); /* Text is dark on orange in Figma */
    box-shadow: var(--shadow-button);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-darker);
    transform: translateY(-2px);
}

.btn-secondary { /* For card buttons */
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    box-shadow: var(--shadow-button);
    font-size: 1.25rem; /* Figma card buttons are 24px H2 style */
    padding: 10px 25px; /* Slightly smaller padding for these */
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary-darker);
    transform: translateY(-2px);
}

.btn-cta-header, .btn-cta-hero {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Figma H2 24px */
    /* padding: 12px 35px; /* Larger CTA */
}

.btn-cta-hero {
    /*min-width: 350px;*/
    min-width: 90%;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}
.btn-outline:hover, .btn-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* 6. Header
-------------------------------------------------- */
.site-header {
    background-color: var(--color-background-light);
    height: var(--header-height);
    position: fixed; /* Sticky header */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-img {
    height: 35px; /* Adjust based on your logo aspect ratio */
    width: auto;
}
.logo-img-footer {
    height: 40px;
}


.main-navigation ul {
    display: flex;
    gap: 30px; /* Figma gap */
}

.main-navigation a {
    font-size: 1.1rem; /* Figma H2 24px, slightly reduced for space */
    font-weight: 600;
    color: var(--color-text-dark);
    opacity: 0.9; /* Figma opacity */
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a.active { /* JS can add .active on scroll */
    color: var(--color-primary);
}
.main-navigation a:hover::after,
.main-navigation a:focus::after,
.main-navigation a.active::after {
    width: 100%;
}

.mobile-nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above nav */
}
.hamburger-icon {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text-dark);
    position: relative;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-dark);
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}
.hamburger-icon::before {
    top: -7px;
}
.hamburger-icon::after {
    bottom: -7px;
}
/* Active state for hamburger */
.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Middle line disappears */
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
}


/* 7. Hero Section
-------------------------------------------------- */
.hero-section {
    padding-top: calc(var(--header-height) + 60px); /* Space for fixed header + extra */
    padding-bottom: 60px;
    background-color: var(--color-background-light); /* Figma main bg is white */
    position: relative;
    overflow: hidden; /* For deco elements */
    min-height: calc(100vh - var(--header-height)); /* Attempt full viewport height */
    display: flex;
    align-items: center;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-content {
    flex: 1;
    max-width: 526px; /* Figma width */
    position: relative; /* For z-index if needed */
    z-index: 2;
}

.hero-title-container {
    margin-bottom: 20px; /* Space after title block */
}

.hero-image-area {
    flex: 1;
    position: relative; /* For positioning decorative elements */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px; /* Ensure space for the image and decos */
}

.hero-main-image {
    max-width: 390px; /* Figma image width */
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.hero-background-blur { /* Figma orange blur */
    position: absolute;
    width: 60%; /* Adjust size */
    height: 80%; /* Adjust size */
    right: -10%; /* Adjust position */
    top: 10%;   /* Adjust position */
    background: rgba(251, 135, 36, 0.15); /* Figma was 0.2 */
    filter: blur(100px); /* Figma blur */
    border-radius: 63px 0px 0px 0px; /* Figma radius */
    z-index: 0;
}

/* Decorative elements in Hero (example) */
.deco-element {
    position: absolute;
    z-index: 0; /* Behind main content but above blur if needed */
}
.deco-icon {
    position: absolute;
    z-index: 1; /* Can be above main image for some effects */
    background-color: var(--color-text-dark); /* Default for icon containers */
    border-radius: var(--border-radius-md);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}
.deco-icon img {
    width: 30px; /* Adjust based on icon size */
    height: 30px;
}

/* Example positioning - these need to be fine-tuned based on Figma */
.deco-circle-yellow-1 { width: 31px; height: 31px; background: var(--color-secondary); border-radius: 50%; left: 15%; top: 15%; }
.deco-circle-black-1 { width: 47px; height: 47px; background: var(--color-text-dark); border-radius: 50%; left: 5%; top: 5%; }
.deco-star-1 { /* Use an SVG or ::before/::after pseudo-element for star */
    width: 95px; height: 95px;
    background-image: url(../img/star_icon.svg);
    right: 10%; top: 10%; transform: rotate(30deg);
}
.deco-facebook { left: 15%; top: 35%; transform: matrix(0.97, 0.26, -0.26, 0.97, 0, 0); } /* from Figma */
.deco-instagram { right: 10%; top: 65%; transform: matrix(0.91, 0.42, -0.41, 0.91, 0, 0); color: var(--color-secondary);}
.deco-instagram .deco-icon-img { filter: brightness(0) invert(1); /* if icon is black and bg is dark */ }

.deco-web { right: 15%; top: 40%; background-color: var(--color-secondary); transform: matrix(0.88, -0.47, 0.47, 0.88, 0, 0); }
.deco-web img { filter: brightness(0) saturate(100%); } /* To make SVG black if it's white */
.deco-whatsapp { left: 10%; top: 60%; background-color: var(--color-secondary); transform: matrix(0.92, -0.4, 0.39, 0.92, 0, 0); } /* Figma had different transform */
.deco-whatsapp img { filter: brightness(0) saturate(100%); }


/* 8. Benefits Section
-------------------------------------------------- */
.benefits-section {
    padding: 80px 0;
    background-color: var(--color-background-medium);
    position: relative;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Adjust gap */
    position: relative; /* For connector lines */
    z-index: 1;
}

.benefit-card {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /*text-align: center; /*modificado por KKMF*/
    text-align: center;
    padding: 20px; /* Padding for content inside card */
}

.benefit-card-image {
    width: 100%; /* Full width of the card's padding box */
    height: 300px; /* Figma height */
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border: 4px solid var(--color-secondary); /* Figma border */
    border-radius: var(--border-radius-lg); /* Match card's radius if image is at the very top */
}
.benefit-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Or 'contain' depending on images */
}

/* Social proof overlay for first card */
.social-proof-overlay {
    position: absolute;
    top: 20px;
    left: 10px; /* Adjust */
    font-size: 0.75rem;
    color: var(--color-text-light); /* White text in Figma */
}
.social-proof-overlay span {
    display: block;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
    padding: 3px 8px;
    border-radius: var(--border-radius-pill);
    margin-bottom: 5px;
    transform-origin: left center;
    text-align: left;
}
.social-proof-overlay i {
    color: var(--color-secondary);
    margin-right: 5px;
}
/* Individual rotations based on Figma - highly specific 
.social-proof-overlay span:nth-child(1) { transform: rotate(-15deg) translateX(5px); }
.social-proof-overlay span:nth-child(2) { transform: rotate(-18deg) translateX(15px) translateY(5px); }
 ...and so on for other spans */

/* Calendar overlay for third card */
.calendar-overlay {
    position: absolute;
    bottom: 20px; /* Adjust */
    left: 20px; /* Adjust */
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.calendar-icon {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    padding: 10px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    width: 80px; /* Approx from Figma */
}
.calendar-icon .month { font-size: 0.9rem; font-weight: 700; display: block; background-color: var(--color-secondary); color: var(--color-text-dark); padding: 3px 0; border-radius: 3px 3px 0 0;}
.calendar-icon .day { font-size: 2rem; font-weight: 700; display: block; line-height: 1; }
.calendar-icon .weekday { font-size: 0.7rem; display: block; }

.time-icon {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    padding: 5px 10px;
    border-radius: var(--border-radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
.time-icon i { color: var(--color-primary); }


.benefit-card-content {
    padding: 10px; /* Padding for text content */
}
.benefit-card-content h3 {
    font-size: 1.25rem; /* Figma H3_20 */
    margin-bottom: 10px;
}
.benefit-card-content p {
    font-size: 1rem; /* Figma Body_16 */
    font-weight: 700; /* Figma has bold */
    margin-bottom: 20px;
    min-height: 50px; /* To align buttons if text length varies */
}
.benefit-card-content .btn {
    margin-top: auto; /* Push button to bottom if card heights vary */
}

/* Connector lines - very tricky to make responsive */
.benefit-connector-line-1, .benefit-connector-line-2 {
    position: absolute;
    border: 1px dashed var(--color-text-dark); /* Figma border */
    z-index: 0;
    display: none; /* Hide by default, show on larger screens if feasible */
}
/* Example positioning - this needs media queries and JS to be accurate */
/* .benefit-connector-line-1 { top: 50%; left: 30%; width: 10%; height: 0; transform: translateY(-50%); } */


/* 9. How It Works Section
-------------------------------------------------- */
.how-it-works-section {
    padding: 80px 0;
    background-color: var(--color-background-light);
}

.how-it-works-graphic {
    position: relative;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin: 60px auto;
    aspect-ratio: 1 / 0.7; /* Approximate aspect ratio of Figma graphic area */
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-hub {
    position: relative;
    z-index: 2;
}
.lilu-central-icon {
    width: clamp(150px, 30vw, 400px); /* Responsive size */
    /* Exact Figma size: 324.71px x 327.82px */
    /* The smiley in Figma has specific paths, may need SVG for accurate rendering */
}

.dashed-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(300px, 60vw, 460px); /* Figma 460px */
    height: clamp(300px, 60vw, 460px);
    border: 1px dashed rgba(15, 15, 15, 0.93); /* Figma dashed border */
    border-radius: 50%;
    transform: translate(-50%, -50%) matrix(1, 0, 0.11, 0.99, 0, 0); /* Figma transform */
    z-index: 1;
}

.process-step {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
}
.step-icon-container {
    width: clamp(60px, 10vw, 90px); /* Responsive icon container */
    height: clamp(60px, 10vw, 90px);
    background-color: var(--color-secondary); /* Default for yellow icons */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.step-icon {
    width: 50%; /* Icon size relative to container */
    height: 50%;
    object-fit: contain;
}
.step-label {
    font-size: clamp(1rem, 2vw, 1.25rem); /* Figma H2_32, adjusted */
    font-weight: 600;
    color: var(--color-text-dark);
    padding: 5px 0;
    border-bottom: 1px solid var(--color-text-dark); /* Figma underline */
    background-color: var(--color-background-light); /* To appear above dashed line */
    padding: 5px 10px;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); /* Figma radius */
}

/* Positioning the steps around the circle (approximate) */
/* These will need to be fine-tuned for responsiveness */
.step-optimize { top: 12%; left: 12%; transform: translate(-50%, -50%); } /* Top-left */
.step-optimize .step-icon-container { background-color: var(--color-secondary); } /* Yellow */

.step-listen { top: 15%; right: 15%; transform: translate(50%, -50%); }   /* Top-right */
.step-listen .step-icon-container { background-color: var(--color-primary); } /* Orange */
.step-listen .step-icon { filter: brightness(0) invert(1); } /* White icon on orange */

.step-test { bottom: 15%; left: 20%; transform: translate(-50%, 50%); }  /* Bottom-left */
.step-test .step-icon-container { background-color: var(--color-primary); } /* Orange */
.step-test .step-icon { filter: brightness(0) invert(1); } /* White icon on orange */

.step-design { bottom: 10%; right: 10%; transform: translate(50%, 50%); } /* Bottom-right */
.step-design .step-icon-container { background-color: var(--color-secondary); } /* Yellow */

.btn-cta-how {
    display: block;
    margin: 40px auto 0;
    font-size: 1.2rem;
    min-width: 350px;    
}

/* 10. FAQ Section
-------------------------------------------------- */
.faq-section {
    padding: 80px 0;
    background-color: var(--color-background-medium);
    overflow: hidden; /* For decorative elements */
}
.faq-container {
    display: flex;
    align-items: flex-start; /* Align items to top */
    gap: 50px;
}
.faq-content {
    flex: 1.2; /* Give more space to questions */
}
.faq-content .section-header {
    text-align: left;
    margin-bottom: 30px;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between FAQ items */
}
.faq-item {
    /* Figma has a pill shape: orange circle on left, white rounded rect on right */
    display: flex; /* For aligning icon and text */
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* Ensure child elements conform to pill shape */
}
.faq-item::before { /* Orange circle part of the pill */
    content: '';
    display: block;
    min-width: 66px; /* Corresponds to height for a circle */
    height: 66px;
    background-color: rgba(251, 126, 20, 0.933); /* Figma orange */
    border-radius: 50% 0 0 50% / 50% 50% 50% 50%; /* Makes the left end round */
    align-self: stretch; /* Make it full height of faq-item */
}
.faq-run{
    margin-left: 50px;
}
.faq-question {
    flex-grow: 1;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    padding: 20px 25px 20px 15px; /* Adjust padding to align with circle */
    text-align: left;
    font-size: 1.1rem; /* Figma H3_20 */
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
}
/*.faq-question::after { /* Icon for accordion state (e.g., +/-, arrow) 
    content: '\f078'; /* Font Awesome chevron-down 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 15px;
    transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"]::after {
    transform: rotate(180deg);
}*/

.faq-answer {
    padding: 0 25px 20px calc(66px + 15px); /* Align with question text, past the orange circle */
    background-color: var(--color-background-light);
    border-radius: 0 0 var(--border-radius-pill) var(--border-radius-pill); /* If pill shape extends */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}
.faq-answer[hidden] {
    display: none; /* Ensure it's truly hidden for AT */
}
.faq-answer p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}
.faq-question[aria-expanded="true"] + .faq-answer {
    /* padding: 20px 25px 20px calc(66px + 15px); */ /* Re-apply padding on expand */
    /* max-height: 500px; */ /* Arbitrary large height for content */
    /* Handled by JS by removing 'hidden' and setting max-height */
}

.ask-lilu-btn {
    margin-top: 30px;
    width: auto; /* Don't make it full width unless intended */
    align-self: flex-start; /* Align to left */
}

.faq-image-area {
    flex: 0.8;
    position: relative; /* For deco elements */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px; /* Give space for question mark */
}
.faq-image-area img {
    max-width: 350px; /* Adjust as needed */
    position: relative;
    z-index: 1;
}
/* FAQ Deco elements */
.deco-q-mark { position: absolute; top: 0; right: 10%; z-index: 2; }
.deco-q-mark img { width: clamp(80px, 15vw, 110px); } /* Figma size */
.deco-lines-1, .deco-lines-2, .deco-lines-3 { /* Figma swirl lines */
    position: absolute;
    border: 0.75px solid var(--color-text-dark);
    border-radius: 50%;
    z-index: 0;
}
.deco-lines-1 { width: 536px; height: 120px; left: -100px; top: 100px; transform: matrix(0.85, 0.53, -0.44, 0.9, 0, 0); } /* From Figma */
/* .deco-lines-2, .deco-lines-3 similar with different positions/sizes */
.deco-circle-yellow-faq { width: 23px; height: 23px; background: var(--color-secondary); border-radius: 50%; left: -50px; top: 80px; }
.deco-circle-black-faq { width: 35px; height: 35px; background: var(--color-text-dark); border-radius: 50%; left: 50px; top: 85px; }
.deco-star-faq { /* Use SVG */ width: 30px; height: 30px; top: 200px; left: -60px; transform: rotate(45deg); background-color: var(--color-text-dark); }
.deco-shadow-person { /* Figma shadow blob */
    width: 387px; height: 102px; background: var(--color-text-dark);
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    border-radius: 50% / 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; /* Creates a half-ellipse */
    z-index: 0;
}


/* 11. Footer
-------------------------------------------------- */
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding-top: 60px;
    /* padding-bottom: 30px; */ /* Bottom part has its own padding */
}

.footer-container {
    /* display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; */
    /* Figma footer is single column for logo/desc/social then copyright */
}

.footer-logo-info {
    max-width: 650px; /* Figma text width */
    margin-bottom: 40px;
}
.logo-footer {
    margin-bottom: 16px; /* Figma gap */
}
.footer-description {
    font-size: 1rem; /* Figma 16px */
    line-height: 1.5; /* Figma 150% */
    letter-spacing: -0.02em; /* Figma */
    margin-bottom: 20px;
}
.social-media-icons {
    display: flex;
    gap: 20px; /* Figma gap */
}
.social-media-icons a {
    width: 50px; /* Figma size */
    height: 50px;
    background-color: var(--color-secondary); /* Yellow background for most */
    color: var(--color-background-dark); /* Black icon */
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.social-media-icons a:hover {
    transform: scale(1.1);
    background-color: var(--color-text-light); /* Example hover */
}
/* Specific icon styling from Figma if needed (e.g., LinkedIn might have different bg) */
/* .social-media-icons a[aria-label*="LinkedIn"] { background-color: var(--color-secondary); } */


.footer-divider {
    border: none;
    height: 1px;
    background-color: var(--color-text-light); /* White line */
    opacity: 0.5;
    margin: 30px 0; /* Spacing around divider */
}
.footer-bottom {
    padding-bottom: 30px;
}
.copyright-text {
    text-align: left; /* Figma is left aligned */
    font-size: 0.9rem; /* Figma 16px, slightly smaller */
    font-weight: 500; /* Figma */
    letter-spacing: -0.02em; /* Figma */
    margin-bottom: 0;
    opacity: 0.8;
}

/* 12. Modal
-------------------------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}
.modal[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background-color: var(--color-background-light);
    padding: 30px;
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal[aria-hidden="false"] .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8rem;
    color: var(--color-text-subtle);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.modal-close-btn:hover {
    color: var(--color-text-dark);
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
}
.lilu-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    box-shadow: var(--shadow-sm);
}
.modal-header h2 {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 5px;
}
.modal-header p {
    font-size: 1rem;
    color: var(--color-text-subtle);
    margin-bottom: 0;
}

.modal-body .form-group {
    margin-bottom: 15px;
}
.modal-body label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.9rem;
}
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}
.modal-body textarea {
    resize: vertical;
    min-height: 80px;
}
.modal-body .form-feedback {
    margin-top: 10px;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    display: none; /* Hidden by default */
}
.form-feedback.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}
.form-feedback.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.modal-options {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.modal-options p {
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    margin-bottom: 10px;
}
.modal-options .btn-outline {
    margin: 5px;
    font-size: 0.9rem;
    padding: 8px 15px;
}

.modal-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}


/* 13. Animations & Transitions
-------------------------------------------------- */
/* Add subtle fade-in for sections on scroll */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* 14. Responsive Styles (Media Queries)
-------------------------------------------------- */

/* Tablet and larger mobiles */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
    }
    .hero-container {
        flex-direction: column;
        text-align: center;
    }
    .hero-content {
        order: 2; /* Text below image on smaller screens */
        max-width: 100%;
    }
    .hero-image-area {
        order: 1;
        margin-bottom: 30px;
        min-height: auto; /* Adjust */
    }
    .hero-main-image { max-width: 300px; }
    .hero-background-blur { width: 80%; height: 60%; }

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

    .how-it-works-graphic {
        /* Consider a simpler stacked layout for steps on mobile */
        transform: scale(0.8); /* Scale down the whole graphic */
    }
    /* Reposition steps for smaller screens if complex layout breaks */
    .process-step { position: static; margin-bottom: 20px; transform: none !important; }
    .how-it-works-graphic { display: flex; flex-direction: column; gap: 20px; align-items: center; }
    .central-hub { order: -1; margin-bottom: 20px; }
    .dashed-circle { display: none; } /* Hide complex dashed circle */


    .faq-container {
        flex-direction: column;
    }
    .faq-content {
        order: 1;
    }
    .faq-image-area {
        order: 2;
        margin-top: 30px;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .deco-lines-1, .deco-lines-2, .deco-lines-3 { display: none; } /* Hide complex decos */

    .footer-container {
        /* flex-direction: column;
        align-items: center;
        text-align: center; */
    }
    .footer-logo-info {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .social-media-icons {
        justify-content: center;
    }
    .copyright-text {
        text-align: center;
    }
}


/* Mobile devices */
@media (max-width: 768px) {
    .main-navigation {
        position: absolute;
        top: 0; /* Align with header top */
        right: 0;
        width: 70%; /* Adjust width */
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-background-light);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide */
        padding-top: calc(var(--header-height) + 20px);
        z-index: 999; /* Below toggle button */
        display: flex; /* To align items */
        flex-direction: column; /* Stack nav items and CTA */
        align-items: center; /* Center nav items */
    }
    .main-navigation.active {
        transform: translateX(0);
    }
    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: 100%;
    }
    .main-navigation li {
        width: 100%;
        text-align: center;
    }
    .main-navigation a {
        font-size: 1.3rem; /* Larger for easier tapping */
        display: block; /* Make entire area clickable */
        padding: 15px 20px;
    }
    .main-navigation .btn-cta-header { /* Move CTA inside nav */
        display: block;
        margin-top: 30px; /* Space above CTA */
        width: 80%;
    }
    .site-header .btn-cta-header { /* Hide original header CTA */
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .hero-description { font-size: clamp(1rem, 4vw, 1.25rem); }
    .section-header h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
    .section-header .subtitle { font-size: clamp(0.9rem, 3.5vw, 1.2rem); }

    .benefits-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .benefit-card-image { height: 250px; }

    /* Further simplify How It Works graphic if needed */
    .lilu-central-icon { width: 120px; }
    .step-icon-container { width: 70px; height: 70px; }
    .step-label { font-size: 1rem; }

    .faq-item::before { min-width: 50px; height: 50px; }
    .faq-question { padding: 15px 20px 15px 10px; font-size: 1rem; }
    .faq-answer { padding-left: calc(50px + 10px); padding-right: 20px; }

    .modal-content {
        padding: 20px;
        width: 95%;
    }
    .modal-header h2 { font-size: 1.5rem; }
}

/* Very small devices */
@media (max-width: 480px) {
    .container {
        width: 95%;
    }
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .btn-cta-header, .btn-cta-hero {
        font-size: 1rem;
    }
    .hero-main-image { max-width: 250px; }

    .benefit-card-image { height: 200px; }
    .social-proof-overlay { font-size: 0.65rem; }
    .social-proof-overlay span { padding: 2px 6px; }

    .calendar-overlay { transform: scale(0.9); left: 10px; bottom: 10px; }

    .faq-item::before { display: none; } /* Remove orange circle on very small screens for space */
    .faq-question { padding: 15px; border-radius: var(--border-radius-pill); }
    .faq-answer { padding: 0 15px 15px 15px; border-radius: 0 0 var(--border-radius-pill) var(--border-radius-pill); }


    .footer-description { font-size: 0.9rem; }
    .social-media-icons a { width: 40px; height: 40px; font-size: 1rem; }
}


/* 12. Chat Widget (y FAB)
-------------------------------------------------- */
.lilu-chat-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1999; /* Debajo del widget de chat si se superponen */
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
.lilu-chat-fab:hover {
    transform: scale(1.1);
    background-color: var(--color-primary-darker);
}
.lilu-chat-fab svg {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.lilu-chat-fab .fab-icon-close {
    display: none;
    transform: rotate(-90deg);
    opacity: 0;
}
.lilu-chat-fab[aria-expanded="true"] .fab-icon-open {
    transform: rotate(90deg);
    opacity: 0;
    display: none; /* Ocultar para que no interfiera con el de cierre */
}
.lilu-chat-fab[aria-expanded="true"] .fab-icon-close {
    display: block;
    transform: rotate(0deg);
    opacity: 1;
}


.chat-widget-container {
    position: fixed;
    bottom: 90px; /* Encima del FAB */
    right: 20px;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out;
}
.chat-widget-container[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.chat-widget { /* Mantiene estilos previos, pero sin overlay */
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-md);
    width: 360px;
    max-height: calc(100vh - 160px); /* Altura máxima, deja espacio para FAB y header */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    /* No más transform/opacity aquí, se maneja en .chat-widget-container */
}
.chat-widget-close-btn-header { /* Botón de cerrar dentro del header del chat */
    font-size: 1.5rem;
    color: var(--color-text-light);
    opacity: 0.8;
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
}
.chat-widget-close-btn-header:hover {
    opacity: 1;
}

.chat-network-error {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 0 15px 5px; /* Para que se alinee con el input */
    text-align: center;
}


/* ... (Resto de los estilos del chat .chat-messages-area, .chat-message, etc. se mantienen) ... */
.chat-widget-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--color-primary); /* Color primario para el header del chat */
    color: var(--color-text-light);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.lilu-avatar-chat {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid var(--color-text-light);
}
.chat-widget-title-container {
    flex-grow: 1;
}
.chat-widget-title-container h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-light);
}
.chat-status {
    font-size: 0.75rem;
    opacity: 0.8;
}
.chat-widget-close-btn { /* Anteriormente .modal-close-btn */
    font-size: 1.5rem;
    color: var(--color-text-light);
    opacity: 0.8;
    background: none;
    border: none;
    padding: 0 5px;
}
.chat-widget-close-btn:hover {
    opacity: 1;
}

.chat-messages-area {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9; /* Fondo ligeramente diferente para mensajes */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Scrollbar styling (opcional) */
.chat-messages-area::-webkit-scrollbar {
    width: 6px;
}
.chat-messages-area::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}
.chat-messages-area::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.chat-message {
    display: flex;
    align-items: flex-end; /* Alinea avatar con la parte inferior del globo */
    max-width: 85%; /* Para que los globos no ocupen todo el ancho */
}
.chat-message.lilu {
    align-self: flex-start;
}
.chat-message.user {
    align-self: flex-end;
}
.chat-message .message-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    align-self: flex-start; /* Mantener avatar arriba si el mensaje es largo */
}
.chat-message.user .message-avatar { /* No avatar para usuario por defecto */
    display: none;
}
.chat-message .message-content {
    padding: 10px 14px;
    border-radius: var(--border-radius-lg);
    font-size: 0.9rem;
    line-height: 1.5;
}
.chat-message.lilu .message-content h1,
.chat-message.lilu .message-content h2,
.chat-message.lilu .message-content h3,
.chat-message.lilu .message-content h4 {
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    font-size: 1.1em; /* Ajusta según tu diseño */
    font-weight: 600;
    line-height: 1.3;
}
.chat-message.lilu .message-content h1:first-child,
.chat-message.lilu .message-content h2:first-child,
.chat-message.lilu .message-content h3:first-child,
.chat-message.lilu .message-content h4:first-child {
    margin-top: 0;
}
.chat-message.lilu .message-content p {
    margin-bottom: 0.5em; /* Espacio entre párrafos */
}
.chat-message.lilu .message-content p:last-child {
    margin-bottom: 0;
}
.chat-message.lilu .message-content ul,
.chat-message.lilu .message-content ol {
    margin-left: 20px;
    margin-bottom: 0.5em;
    padding-left: 5px;
}
.chat-message.lilu .message-content li {
    margin-bottom: 0.2em;
}
.chat-message.lilu .message-content a {
    color: var(--color-primary); /* O un color de enlace adecuado */
    text-decoration: underline;
}
.chat-message.lilu .message-content a:hover {
    text-decoration: none;
}
.chat-message.lilu .message-content code {
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: monospace;
}
.chat-message.lilu .message-content pre {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    margin-bottom: 0.5em;
}
.chat-message.lilu .message-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
.chat-message.lilu .message-content blockquote {
    border-left: 3px solid var(--color-primary-darker);
    padding-left: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    font-style: italic;
    color: #555;
}
.chat-message.lilu .message-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1em 0;
}
.chat-message.lilu .message-content {
    background-color: #e9e9eb; /* Gris claro para Lilu */
    color: var(--color-text-dark);
    border-bottom-left-radius: var(--border-radius-sm); /* Estilo globo */
}
.chat-message.user .message-content {
    background-color: var(--color-primary); /* Color primario para usuario */
    color: var(--color-text-light); /* O var(--color-text-dark) si el primario es claro */
    border-bottom-right-radius: var(--border-radius-sm); /* Estilo globo */
    margin-left: auto; /* Asegura que el mensaje del usuario esté a la derecha */
}
.chat-message .message-content p {
    margin: 0;
}
.chat-message .message-content .timestamp {
    font-size: 0.7em;
    opacity: 0.7;
    display: block;
    text-align: right;
    margin-top: 5px;
}

.chat-input-area {
    padding: 10px 15px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-light);
}
.chat-input-area form {
    display: flex;
    align-items: center;
}
.chat-input-area textarea {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    resize: none;
    min-height: 40px; /* Altura inicial */
    max-height: 100px; /* Para evitar que crezca demasiado */
    overflow-y: auto; /* Scroll si el texto es muy largo */
    font-size: 0.9rem;
    line-height: 1.4;
    margin-right: 10px;
}
.chat-input-area .send-message-btn {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-width: auto;
    border: none;
}
.chat-input-area .send-message-btn:hover {
    background-color: var(--color-primary-darker);
}
.chat-input-area .send-message-btn svg {
    width: 20px;
    height: 20px;
}

/* Quick reply buttons within chat messages */
.quick-reply-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.quick-reply-buttons button {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 6px 12px;
    border-radius: var(--border-radius-pill);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.quick-reply-buttons button:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Typing indicator for Lilu */
.chat-message.lilu.typing .message-content p span {
    height: 8px;
    width: 8px;
    margin: 0 1px;
    background-color: #9E9E9E;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.4;
    animation: typingDots 1s infinite_old alternate; /* Renombrada para evitar conflicto si existe */
}
.chat-message.lilu.typing .message-content p span:nth-child(1) { animation-delay: 0s; }
.chat-message.lilu.typing .message-content p span:nth-child(2) { animation-delay: .2s; }
.chat-message.lilu.typing .message-content p span:nth-child(3) { animation-delay: .4s; }

@keyframes typingDots {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Responsive adjustments for chat widget */
@media (max-width: 768px) {
    .chat-widget-container {
        /* Si quieres que ocupe más pantalla en móvil, como un modal tradicional */
        /* bottom: 0; right: 0; width: 100%; height: 100%; */
    }
    .chat-widget {
        width: 90vw; /* Más ancho en móvil */
        max-height: 80vh;
        /* Si es tipo widget de esquina: */
        /* width: clamp(300px, 85vw, 340px); */
        /* max-height: clamp(350px, 70vh, 500px); */
    }
}

/* Responsive para FAB y Widget */
@media (max-width: 480px) {
    .lilu-chat-fab {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    .lilu-chat-fab svg { width: 24px; height: 24px; }

    .chat-widget-container {
        bottom: 75px; /* Encima del FAB más pequeño */
        right: 15px;
        left: 15px; /* Ocupa más ancho en móvil */
        width: auto; /* Permitir que se ajuste por left/right */
    }
    .chat-widget {
        width: 100%; /* Ocupa el ancho disponible por el container */
        max-height: calc(100vh - 100px); /* Más altura en móvil */
    }
}