/*
Theme Name: Nuestra
Theme URI: https://example.com/nuestra
Author: Nuestra
Author URI: https://example.com
Description: Landing-page WordPress theme for Nuestra — a small-ticket consumer-credit product. Built for use with Elementor on the front page. Uses a red/yellow brand palette, large hero, category grid, application steps, testimonials and FAQ teaser.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nuestra
Tags: landing-page, elementor, one-page, custom-colors, custom-logo, full-width-template
*/

/* ============================================================
   Base reset + typography
   Elementor injects its own styles into pages it handles, but
   this file covers the rest of the site (header, footer, archive
   pages) and exposes CSS variables for the brand palette.
   ============================================================ */

:root {
    --brand-red: #ED1C29;
    --brand-red-dark: #C5121E;
    --brand-yellow: #FFE600;
    --brand-yellow-dark: #E6CF00;
    --brand-ink: #111827;
    --brand-muted: #3D4657;
    --brand-bg: #FFFFFF;
    --brand-bg-soft: #FAF7F4;
    --brand-border: #E5E7EB;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
    --shadow-md: 0 6px 16px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.06);

    --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Poppins", "Inter", Arial, sans-serif;

    --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--brand-ink);
    background: var(--brand-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--brand-ink);
    line-height: 1.2;
    margin: 0 0 .6em;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   Site header
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 20px;
    max-width: var(--container);
    margin: 0 auto;
}

.site-logo a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}

.site-logo .logo-mark {
    width: 36px;
    height: 36px;
    background: var(--brand-red);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}

.site-nav a {
    color: var(--brand-ink);
    font-weight: 500;
}

.site-nav a:hover { color: var(--brand-red); text-decoration: none; }

.header-cta {
    display: inline-block;
    background: var(--brand-yellow);
    color: var(--brand-ink);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-weight: 700;
}
.header-cta:hover { background: var(--brand-yellow-dark); text-decoration: none; }

/* ============================================================
   Site footer
   ============================================================ */

.site-footer {
    background: #1B1F2A;
    color: #C7CDDB;
    padding: 60px 20px 30px;
    margin-top: 80px;
}

.site-footer__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}

.site-footer h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 12px;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #C7CDDB; }
.site-footer a:hover { color: #fff; }

.site-footer__bottom {
    max-width: var(--container);
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid #2D3140;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .875rem;
}

@media (max-width: 800px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-nav ul { display: none; }
}

/* ============================================================
   Reusable button styles (also used by Elementor content)
   ============================================================ */

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-family: var(--font-display);
    text-align: center;
    cursor: pointer;
    border: none;
    transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn--primary { background: var(--brand-yellow); color: var(--brand-ink); }
.btn--primary:hover { background: var(--brand-yellow-dark); }

.btn--secondary { background: #fff; color: var(--brand-red); border: 2px solid var(--brand-red); }
.btn--secondary:hover { background: var(--brand-red); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand-red); }

/* ============================================================
   Front-page sections (used by elementor-content.html as well)
   ============================================================ */

.ll-hero {
    background: linear-gradient(135deg, var(--brand-red) 0%, #FF3B5C 100%);
    color: #fff;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}
.ll-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}
.ll-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.ll-hero p.lead { font-size: 1.15rem; opacity: .95; margin-bottom: 28px; }
.ll-hero__media {
    display: flex; justify-content: center; align-items: center;
}
.ll-hero__media img { max-width: 460px; }

.ll-section { padding: 70px 0; }
.ll-section--soft { background: var(--brand-bg-soft); }
.ll-section__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.ll-section__head h2 span { color: var(--brand-red); }
.ll-section__head p { color: var(--brand-muted); font-size: 1.05rem; }

/* Category grid */
.ll-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ll-cat-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: 24px 18px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ll-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ll-cat-card img { width: 64px; height: 64px; margin: 0 auto 14px; }
.ll-cat-card h3 { margin: 0 0 6px; font-size: 1rem; }
.ll-cat-card p { color: var(--brand-muted); font-size: .9rem; margin: 0; }

/* Features */
.ll-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ll-feature {
    text-align: center;
    padding: 24px;
}
.ll-feature__icon {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    background: rgba(237, 28, 41, 0.08);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ll-feature__icon img { width: 36px; height: 36px; }

/* Steps */
.ll-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: step;
}
.ll-step {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    counter-increment: step;
}
.ll-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -22px; left: 24px;
    background: var(--brand-yellow);
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-weight: 700;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.ll-step h3 { margin-top: 8px; }

/* Testimonials */
.ll-testis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ll-testi {
    background: #fff;
    border-left: 4px solid var(--brand-red);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.ll-testi blockquote {
    margin: 0 0 16px;
    font-style: italic;
    color: var(--brand-muted);
}
.ll-testi__author { display: flex; align-items: center; gap: 12px; }
.ll-testi__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-yellow);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.ll-testi__name { font-weight: 600; }
.ll-testi__city { font-size: .85rem; color: var(--brand-muted); }

/* FAQ */
.ll-faq { max-width: 820px; margin: 0 auto; }
.ll-faq details {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: 18px 24px;
    margin-bottom: 12px;
}
.ll-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-display);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--brand-red);
    line-height: 1;
}
.ll-faq details[open] summary::after { content: "−"; }
.ll-faq details p { margin-top: 12px; color: var(--brand-muted); }

/* Form (used by HTML widget in Elementor + by Pro Form widget fallback) */
.nuestra-form { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-sans); }
.nuestra-form__row { display: flex; flex-direction: column; gap: 6px; }
.nuestra-form label { font-size: .9rem; color: var(--brand-muted); font-weight: 500; }
.nuestra-form input[type="text"],
.nuestra-form input[type="email"],
.nuestra-form input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nuestra-form input:focus {
    outline: none;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(237, 28, 41, 0.12);
}
.nuestra-form input:invalid:not(:placeholder-shown) {
    border-color: var(--brand-red);
}
.nuestra-form__check {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .9rem; color: var(--brand-muted);
}
.nuestra-form__check input { margin-top: 3px; }
.nuestra-form__submit {
    background: var(--brand-yellow);
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-weight: 700;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: 6px;
    transition: background-color .15s ease, transform .15s ease;
}
.nuestra-form__submit:hover { background: var(--brand-yellow-dark); transform: translateY(-1px); }
.nuestra-form__submit:disabled { opacity: .6; cursor: wait; transform: none; }
.nuestra-form__msg {
    margin: 6px 0 0;
    font-size: .9rem;
    min-height: 1.2em;
}
.nuestra-form__msg.is-ok    { color: #047857; }
.nuestra-form__msg.is-error { color: var(--brand-red); }

/* Final CTA */
.ll-cta-band {
    background: var(--brand-ink);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    border-radius: var(--radius-lg);
    max-width: var(--container);
    margin: 60px auto 0;
}
.ll-cta-band h2 { color: #fff; }
.ll-cta-band p { color: #C7CDDB; max-width: 520px; margin: 0 auto 28px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
    .ll-hero__inner { grid-template-columns: 1fr; text-align: center; }
    .ll-hero__media { order: -1; }
    .ll-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .ll-features, .ll-steps, .ll-testis { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .ll-hero { padding: 50px 0 60px; }
    .ll-section { padding: 50px 0; }
    .ll-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}