/* Marina Inspira - Landing Page Styles */

/* Design Tokens (CSS Custom Properties) */
:root {
    /* Primary accent color used for highlights and emphasis */
    --accent: #FF6B6B;
    /* Soft, light background used for subtle sections */
    --bg-soft: #F3F4F6;
    /* Default text color for light surfaces */
    --text-default: #000000;
    --pricing-row-a: #F3F4F6;  /* light gray A */
    --pricing-row-b: #ECEFF3;  /* light gray B */
    --pricing-total-bg: #EAFBF1; /* very light green for TOTAL row */
}

/* Base Styles */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Utility Classes */
.text-accent { /* Utility to colorize text using the global accent token */
    color: var(--accent) !important;
}

.bg-soft { /* Utility to apply soft background color */
    background-color: var(--bg-soft) !important;
}

/* CTA Button Component */
.cta-button {
    display: inline-block;
    padding: 1.5rem 3rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.125rem;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(90deg, #22C55E, #16A34A);
    box-shadow: 0 8px 25px 0 rgba(34, 197, 94, 0.8);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    min-width: 280px;
    letter-spacing: 0.5px;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px 0 rgba(34, 197, 94, 0.9);
    text-decoration: none;
    color: white;
}

/* Section Title Component */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #1A202C;
}

/* H1 and H2 Titles */
h1 {
    font-size: 2.5rem !important;
}

h2 {
    font-size: 1.875rem !important;
}

/* Highlighted Keywords */
.highlight-keyword {
    color: var(--accent);
    font-weight: 900;
}

/* Section Subtitle Component */
.section-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: #4A5568;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

/* FAQ Accordion Styles */
.faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background-color: #f7fafc;
}

.faq-answer {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    color: #4a5568;
    line-height: 1.6;
}

.faq-icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 1.25rem;
    font-weight: bold;
}

.faq-icon.rotate {
    transform: rotate(45deg);
}

.hidden {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .cta-button {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .section-title {
        font-size: 1.75rem;
    }
    
    .cta-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.8rem;
    }
}

/* Quick Action Bonus box */
.bonus-quick-action { /* Visual rules grouped in a single utility-like class */
    background-color: var(--bg-soft);
    color: var(--text-default);
}

/* Icon + text list alignment helper */
.list-check li p, .list-cross li p { /* keep text block to the right of the icon */
    margin: 0;              /* remove default p margin to keep vertical rhythm */
    flex: 1 1 auto;         /* allow text to take remaining width */
    min-width: 0;           /* enable wrapping inside flex items */
    line-height: 1.6;       /* comfortable reading */
}
.list-check li, .list-cross li { /* ensure items do not wrap awkwardly */
    gap: 0.5rem;            /* consistent spacing between icon and text */
}

/* Responsive pricing list: label on left, price on right; stack on small screens */
.pricing-list li {
    display: grid;                  /* grid for easy switching between layouts */
    grid-template-columns: 1fr auto;/* desktop: label takes space, price right-aligned */
    align-items: baseline;
    column-gap: 1rem;
}
.pricing-list .label { min-width: 0; }
.pricing-list .price { text-align: right; white-space: nowrap; }

/* Mobile behavior */
@media (max-width: 640px) {
    .pricing-list li { grid-template-columns: 1fr; row-gap: 0.25rem; }
    .pricing-list .label { font-weight: 500; }
    .pricing-list .price { 
        text-align: left;           /* align with label */
        padding-left: 1rem;         /* slight indent to indicate relation */
        position: relative;
    }
    .pricing-list .price::before {  /* visual connector */
        content: '↳';
        position: absolute;
        left: 0;
        color: #9CA3AF;             /* gray-400 */
    }
}

/* Two-column pricing table with simple separators */
.pricing-table {
    width: 100%;
    border-collapse: separate;      /* enable spacing between rows for pill look */
    border-spacing: 0 10px;         /* vertical gap between rows */
}
.pricing-table td {
    padding: 0.875rem 1rem;         /* comfortable padding inside pills */
    border: none;                   /* remove default separators */
}
.pricing-table .label {
    color: #374151;                 /* gray-700 for labels */
}
.pricing-table .price {
    text-align: right;
    white-space: nowrap;
    color: #111827;                 /* gray-900 for emphasis */
}
/* Apply soft background and rounded corners to pill rows */
.pricing-table tr.pill td,
.pricing-table tr.total td {
    background-color: var(--bg-soft);
}
.pricing-table tr.pill td:first-child,
.pricing-table tr.total td:first-child { border-radius: 10px 0 0 10px; }
.pricing-table tr.pill td:last-child,
.pricing-table tr.total td:last-child  { border-radius: 0 10px 10px 0; }

/* Zebra background for all rows except TOTAL */
.pricing-table tbody tr:not(.total) td { background-color: var(--pricing-row-b); }
.pricing-table tbody tr:nth-child(even):not(.total) td { background-color: var(--pricing-row-a); }
/* Rounded corners for all rows (keep TOTAL with same radius) */
.pricing-table tbody tr:not(.total) td:first-child { border-radius: 10px 0 0 10px; }
.pricing-table tbody tr:not(.total) td:last-child { border-radius: 0 10px 10px 0; }
/* TOTAL row background (soft green) */
.pricing-table tr.total td { background-color: var(--pricing-total-bg) !important; }
.pricing-table tr.bonus .label { font-weight: 700; }
.pricing-table tr.bonus .price { font-weight: 800; }

/* Emphasis for "Inestimável" price label */
.price-highlight {
    color: #EF4444;          /* red-500 for attention */
    font-weight: 800;
}

/* Strike-through helper for original prices */
.strike {
    text-decoration: line-through;
    color: #6B7280; /* gray-500 */
    font-weight: 600;
}

/* Tighten horizontal spacing on small screens for pricing card and table */
@media (max-width: 480px) {
  .pricing-card { padding-left: 8px !important; padding-right: 8px !important; }
  .pricing-table { border-spacing: 0 8px; }
  .pricing-table td { padding: 0.75rem 0.75rem; }
}