:root {
    --font-family-display: 'Oswald', var(--font-family-base); /* For distinctive titles */
    --font-family-base: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bg-color: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #5A5A5A;
    --text-tertiary: #8A8A8A; /* New: for even lighter descriptive text */
    --cta-primary-bg: #1A1A1A;
    --cta-primary-text: #FFFFFF;
    --btn-secondary-bg: #E0E0E0; /* Lighter grey for secondary buttons */
    --btn-secondary-text: #1A1A1A;
    --btn-border: #D0D0D0; /* Border for secondary buttons */
    --text-description-on-dark: #CFCFCF; /* Gris claro/blanco atenuado */
    --card-bg: #FAFAFA; /* Light background for cards */
    --divider-color: #EEEEEE; /* Lighter divider for subtle separation */
}

body {
    font-family: var(--font-family-base);
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography Hierarchy --- */
.welcome-card .welcome-title { /* This is for TETELESTAI */
    font-family: var(--font-family-display); /* Use Oswald or similar for Brand/Main Title */
    font-size: 20px; /* CHICO for brand name */
    font-weight: 500; /* REGULAR o SEMIBOLD */
    line-height: 1.2;
    letter-spacing: normal;
    margin: 0;
    color: var(--cta-primary-text); /* BLANCO */
    text-transform: none; /* Ensure no uppercase */
    margin-bottom: 8px; /* Spacing */
}

/* Adjust sizes for the specific elements inside the welcome card */
.welcome-card .welcome-sub { /* This holds the main title now */
    font-size: 38px; /* GRANDE */
    font-weight: 700; /* BOLD */
    color: var(--cta-primary-text); /* BLANCO */
    line-height: 1.2;
    margin-top: 16px; /* Spacing */
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.welcome-card .welcome-text { /* This holds the secondary text now */
    font-size: 16px; /* CHICO */
    font-weight: 400; /* REGULAR */
    color: var(--text-secondary); /* GRIS */
    line-height: 1.5; /* Generous line-height */
    max-width: 580px;
    margin: 16px auto 24px; /* Spacing */
}

.welcome-card .slogan { /* This holds the signature now */
    font-size: 18px; /* CHICO a MEDIO */
    font-weight: 500; /* SEMIBOLD */
    color: var(--cta-primary-text); /* BLANCO */
    line-height: 1.5;
    margin-top: 24px; /* Spacing */
}

h2, .talle-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-top: 32px; /* Spacing */
    margin-bottom: 24px; /* Spacing */
}

p, .talle-steps { /* Removed .card-meta from here as it will have specific styling */
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary); /* Default to primary text color */
}
.talle-steps strong {
    color: var(--text-primary);
}


/* --- Layout & Spacing --- */
.app, .detail-card {
    max-width: 960px; /* Max-width del contenedor principal */
    margin: 0 auto;
}

.welcome {
    background-color: #111111; /* Asegurar fondo oscuro */
    padding: 64px 24px; /* Generous padding */
}

.welcome-card {
    background-color: transparent; /* No background for the card itself */
    box-shadow: none;
    padding: 0; /* No extra padding here, managed by welcome */
    text-align: center;
    max-width: 800px; /* Adjust max-width if needed for content */
}

.welcome-contact {
    margin-top: 32px; /* Spacing */
    margin-bottom: 32px; /* Spacing */
}
.welcome-contact p {
    color: var(--text-secondary); /* Secondary text color */
}
.welcome-contact a {
    color: var(--cta-primary-text); /* White for contrast */
}


/* --- CTAs & Buttons --- */
.welcome-cta, .talle-btn, .benefits-btn {
    display: inline-block;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 8px; /* 6-8px */
    font-size: 16px;
    font-weight: 500;
    line-height: 48px; /* Centra el texto verticalmente */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease-in-out;
    border: none;
    text-transform: none; /* Override uppercase if any */
    letter-spacing: normal;
    margin-top: 16px; /* Spacing between buttons */
}

.welcome-cta:first-of-type {
    margin-top: 0; /* No margin top for the first cta in a group */
}


/* --- Specific button styling (main CTAs) --- */
#btnCalcularTalle, #btnCalcularTalleJogger, #btnCalcularTalleBermuda,
.welcome-cta[onclick*="entrarApp"] { /* Primary CTA */
    background-color: var(--btn-secondary-bg); /* Changed to secondary */
    color: var(--btn-secondary-text); /* Changed to secondary */
    border: 1px solid var(--btn-border); /* Added border */
}
.welcome-cta:hover, #btnCalcularTalle:hover, #btnCalcularTalleJogger:hover, #btnCalcularTalleBermuda:hover {
    transform: scale(1.03);
    opacity: 1;
}

/* --- Adjustment 2: "Volver" Button --- */
.detail-back {
    min-height: 40px; /* Slightly smaller for secondary action */
    line-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: #CDCDCD; /* Darker grey for more visibility */
    color: var(--btn-secondary-text); /* Dark text */
    border: 1px solid #B0B0B0; /* More defined border */
    font-size: 14px; /* Smaller font size */
    font-weight: 500;
    text-transform: none;
    margin-bottom: 24px; /* Spacing */
    display: inline-flex; /* To use gap if needed */
    align-items: center;
    gap: 8px;
}
.detail-back:hover {
    background-color: #B5B5B5; /* Even darker grey on hover */
    transform: scale(1.02);
}

/* --- Adjustment 3: Talle Remera functional buttons --- */
/* These buttons will be added in index.html, so I'll preemptively style them */
#btnLimpiarTalleRemera, .talle-btn[onclick*="window.scrollTo"] { /* For "Borrar datos" and "Volver arriba" */
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-border);
    font-weight: 500;
    font-size: 14px;
    min-height: 40px;
    line-height: 40px;
    padding: 0 16px;
    margin-top: 16px; /* Spacing */
}
#btnLimpiarTalleRemera:hover, .talle-btn[onclick*="window.scrollTo"]:hover {
    background-color: #D5D5D5;
}


/* --- Outfit Cards General Styling --- */
.card {
    border-radius: 12px;
    padding: 24px;
    /* gap: 16px; This was on the card itself, but the grid applies gaps. Removing for clarity */
    background-color: var(--card-bg); /* Light background for cards */
    border: 1px solid var(--divider-color); /* Subtle border for definition */
    margin-bottom: 2rem; /* Increased spacing between cards for better visual separation */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Very subtle shadow */
}

/* --- 1) Titles of each block (nombre de prenda y “Outfit completo”) --- */
.card-top {
    font-family: var(--font-family-display); /* Editorial font */
    font-size: 1.25rem; /* ~20px, ~25% increase from 16px */
    font-weight: 600; /* Semibold */
    color: var(--text-primary); /* Black/very dark gray */
    text-transform: uppercase;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem; /* Increased margin */
    line-height: 1.2;
    text-decoration: none; /* No underline */
}
.card-main {
    font-family: var(--font-family-display); /* Editorial font */
    font-size: 1.125rem; /* ~18px, ~12.5% increase from 16px */
    font-weight: 600; /* Semibold */
    color: var(--text-primary);
    text-transform: uppercase;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem; /* More space below main title */
    line-height: 1.2;
    text-decoration: none; /* No underline */
}
/* .detail-title is in index.html, not dynamically generated */
.detail-title {
    font-family: var(--font-family-display);
    font-size: 1.5rem; /* Larger title for detail view */
    font-weight: 700; /* Bold for main detail title */
    color: var(--text-primary);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none; /* No underline */
}

.detail-garment-name {
    font-family: var(--font-family-base); /* Keep base font as it's a subtitle within a list item */
    font-size: 1rem; /* ~16px, base size but semibold */
    font-weight: 600; /* Semibold */
    color: var(--text-primary);
    text-transform: uppercase;
    margin-top: 1rem; /* Increased vertical separation */
    margin-bottom: 0.25rem;
    display: block;
    text-decoration: none; /* No underline */
}

/* --- 2) Descriptive texts --- */
.card-meta {
    font-size: 0.9375rem; /* ~15px, slightly smaller than base */
    color: var(--text-secondary); /* Medium gray */
    line-height: 1.6;
    margin-bottom: 0.35rem; /* Reduced margin for tighter look */
}
.card-meta b {
    color: var(--text-primary); /* Keep bold text dark */
}
p.detail-summary { /* Specificity for summary paragraph */
    font-size: 0.9375rem; /* ~15px */
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem; /* More spacing below the summary */
}
.detail-benefit-text {
    font-size: 0.9375rem; /* ~15px */
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- 3) Título de sección “Lo que te ofrece este outfit” --- */
.detail-subtitle {
    font-family: var(--font-family-base); /* Keep base font as it's a section title */
    font-size: 1.125rem; /* ~18px */
    font-weight: 600; /* Semibold */
    color: var(--text-primary);
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider-color); /* Thin dividing line */
    text-decoration: none; /* No underline */
}

/* --- 4) Separation between blocks of garments in detail view --- */
.detail-garment-item {
    padding-bottom: 1.25rem; /* Increased padding */
    margin-bottom: 1.25rem; /* Increased margin */
    border-bottom: 1px solid var(--divider-color); /* Thin dividing line */
}
/* Remove border/margin from last item of this type */
.detail-garment-item:last-of-type { /* This will be the "Outfit completo" item */
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}
/* Ensure detail-tools also have proper spacing */
.detail-tools {
    margin-top: 2.5rem; /* Increased spacing */
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider-color); /* Separator */
}
/* The detail-cta-full-outfit was removed in previous step, so no need to style */

/* --- 5) CTAs de compra (“Comprar online”) --- */
.btn-comprar {
    display: block; /* Make it behave like a block button */
    min-height: 40px; /* Smaller height for subtle buttons */
    line-height: 38px; /* Adjusted for border */
    padding: 0 18px; /* Slightly more padding */
    border-radius: 4px; /* Slightly less rounded */
    font-size: 0.9375rem; /* ~15px */
    font-weight: 600; /* Semibold */
    text-decoration: none; /* Remove underline */
    color: var(--text-primary); /* Dark text */
    background-color: transparent; /* Transparent background */
    border: 1px solid var(--text-primary); /* Use primary text color for border */
    transition: all 0.2s ease-in-out; /* Subtle transition */
    margin-top: 1.25rem; /* Increased spacing */
    text-align: center; /* Center text within button */
    width: fit-content; /* Adjust width to content */
    margin-left: auto; /* Center block element */
    margin-right: auto; /* Center block element */
}
.btn-comprar:hover {
    background-color: var(--cta-primary-bg); /* Black background */
    color: var(--cta-primary-text); /* White text */
    border-color: var(--cta-primary-bg); /* Dark border on hover */
    transform: translateY(-1px); /* Subtle lift */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* --- Other general adjustments --- */
.controls button {
    min-height: 48px;
    line-height: 48px;
    border-radius: 8px;
    background-color: var(--cta-primary-bg);
    color: var(--cta-primary-text);
    font-weight: 500;
    font-size: 16px;
    padding: 0 24px;
}

.chip-row {
    margin-top: 1.5rem; /* Increased top margin */
    padding-top: 1.5rem; /* Add padding for border */
    border-top: 1px solid var(--divider-color); /* Separator */
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}


select, input[type="text"] {
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid var(--btn-border);
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-size: 16px;
    padding: 0 16px;
}

/* Result sections */
.talle-result {
    background-color: #FAFAFA;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}
.talle-result-main {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.talle-note {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.talle-cta-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 24px;
}
.talle-cta {
    min-height: 48px;
    line-height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    background-color: var(--cta-primary-bg);
    color: var(--cta-primary-text);
    margin-top: 16px;
}
.talle-cta:hover {
    transform: scale(1.03);
}

/* Footer links */
.footer a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}
.footer a:hover {
    text-decoration: underline;
}


/* Media queries for smaller screens */
@media (max-width: 768px) {
    h1, .hero-title, .welcome-card .welcome-sub {
        font-size: 32px; /* Adjusted size for main title on smaller screens */
    }
    h2, .talle-title {
        font-size: 20px;
    }
    .welcome-card, .talle-card, .detail-card, .hero, .controls, .card {
        padding: 24px 16px;
    }
    .welcome-contact, .welcome-cta {
        margin-top: 12px;
    }
}

.talle-screen div[style*="background:#000"] > p {
    color: var(--text-description-on-dark) !important;
}

/* Override existing welcome-cta to use more subtle gray for the other calculation buttons */
.welcome-cta:not([onclick*="entrarApp"]) {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-border);
}
.welcome-cta:not([onclick*="entrarApp"]):hover {
    background-color: #D5D5D5;
}

/* The previous rule for .detail-garment-item .btn-comprar is now covered by the more general .btn-comprar */
/* Explicitly remove the old override to avoid conflicts */
.detail-garment-item .btn-comprar { /* Remove specific overrides */
    background: transparent !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    line-height: 38px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    margin-top: 1rem !important;
    border: 1px solid var(--btn-border) !important; /* Adjusted to use btn-border */
    border-radius: 4px !important;
}
.detail-garment-item .btn-comprar:hover {
    background-color: var(--cta-primary-bg) !important;
    color: var(--cta-primary-text) !important;
    border-color: var(--cta-primary-bg) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}