@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: #0A2A5E; font-family: 'Montserrat', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.gr-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.gr-wrap-narrow { max-width: 760px; }

.gr-section { padding-block: 64px; }
.gr-bg-light { background: #F5F8FF; }
.gr-bg-tint { background: #EAF2FF; }

.gr-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #1F5EFF; margin-bottom: 12px; }
.gr-h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.08; margin: 16px 0 18px; }
.gr-h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin: 0 0 12px; }
.gr-grad { background: linear-gradient(90deg, #1F5EFF, #2CC8F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gr-section-head { max-width: 620px; margin-bottom: 40px; }
.gr-section-sub { font-size: 17px; color: #5B6B8C; line-height: 1.6; margin: 0; }
.gr-lede { font-size: 18px; line-height: 1.6; color: #5B6B8C; max-width: 46ch; margin: 0 0 26px; }

.gr-ico-sm { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; color: #1F5EFF; }
.gr-ico-sm svg { width: 100%; height: 100%; }
.gr-ico-muted { color: #9AA8C4; }

/* ---------- botones ---------- */
.gr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14.5px/1 'Montserrat', sans-serif; padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease; }
.gr-btn-lg { padding: 15px 26px; font-size: 15.5px; }
.gr-btn-sm { padding: 8px 14px; font-size: 13px; gap: 6px; }
.gr-btn-sm svg { width: 15px; height: 15px; }
.gr-btn-primary { background: #1F5EFF; color: #fff; }
.gr-btn-primary:hover { background: #1A4FDB; }
.gr-btn-outline { background: #fff; color: #0A2A5E; border-color: #DCE5F5; }
.gr-btn-outline:hover { background: #EAF2FF; }
.gr-btn-block { width: 100%; }
.gr-btn-cta-white { background: #fff; color: #0A2A5E; }
.gr-btn-cta-white:hover { background: #EAF2FF; }
.gr-btn-cta-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.gr-btn-cta-outline:hover { background: rgba(255,255,255,.12); }

/* ---------- animaciones de entrada ---------- */
.gr-animate { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.gr-animate.gr-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .gr-animate { opacity: 1; transform: none; transition: none; }
}

/* ---------- navbar ---------- */
.gr-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background .25s ease, box-shadow .25s ease; }
.gr-nav-scrolled { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); box-shadow: 0 1px 2px rgba(10,42,94,.06), 0 4px 16px rgba(10,42,94,.06); }
.gr-nav-inner { max-width: 1200px; margin-inline: auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gr-nav-logo img { height: 26px; width: auto; }
.gr-nav-links { display: none; gap: 26px; font-size: 14px; font-weight: 600; color: #0A2A5E; }
.gr-nav-links a:hover { color: #1F5EFF; }
.gr-nav-actions { display: none; align-items: center; gap: 18px; }
.gr-nav-login { font-size: 14px; font-weight: 600; color: #0A2A5E; }
.gr-nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: none; color: #0A2A5E; cursor: pointer; }
.gr-nav-burger svg { width: 24px; height: 24px; }
.gr-nav-mobile { display: none; flex-direction: column; gap: 4px; background: #fff; border-top: 1px solid #DCE5F5; padding: 14px 20px 20px; }
.gr-nav-mobile a { padding: 10px 0; font-size: 15px; font-weight: 600; color: #0A2A5E; }
.gr-nav-mobile hr { border: none; border-top: 1px solid #DCE5F5; margin: 6px 0; }
.gr-nav-mobile .gr-btn { margin-top: 6px; }
.gr-nav-mobile-open { display: flex; }

@media (min-width: 860px) {
    .gr-nav-links { display: flex; }
    .gr-nav-actions { display: flex; }
    .gr-nav-burger { display: none; }
}

/* ---------- hero ---------- */
.gr-hero { padding-top: 150px; padding-bottom: 60px; }
.gr-hero-grid { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: center; }
.gr-chip { display: inline-block; background: #EAF2FF; color: #1F5EFF; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; }
.gr-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.gr-guarantees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; font-weight: 600; color: #0A2A5E; }
.gr-guarantees li { display: flex; align-items: center; gap: 10px; }

.gr-hero-visual { position: relative; margin-top: 50px; }
.gr-mock-browser { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; box-shadow: 0 1px 2px rgba(10,42,94,.06), 0 4px 16px rgba(10,42,94,.06); overflow: hidden; }
.gr-mock-bar { display: flex; gap: 6px; padding: 10px 14px; background: #F5F8FF; border-bottom: 1px solid #DCE5F5; }
.gr-mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #DCE5F5; }
.gr-mock-body { display: flex; }
.gr-mock-sidebar { width: 46px; background: linear-gradient(180deg, #0D3577, #0A2A5E); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; flex-shrink: 0; }
.gr-mock-dot { width: 18px; height: 18px; border-radius: 6px; background: #fff; }
.gr-mock-ico { width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.25); }
.gr-mock-content { flex: 1; padding: 20px; min-width: 0; }
.gr-mock-hello { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.gr-mock-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.gr-mock-stat { background: #F5F8FF; border: 1px solid #DCE5F5; border-radius: 10px; padding: 10px 12px; }
.gr-mock-stat span { display: block; font-size: 10.5px; color: #5B6B8C; font-weight: 600; margin-bottom: 4px; }
.gr-mock-stat strong { font-size: 15px; color: #0A2A5E; }
.gr-mock-chart { width: 100%; height: 50px; display: block; }

.gr-mock-phone { position: absolute; top: -26px; right: -14px; width: 128px; background: #0A2A5E; color: #fff; border-radius: 18px; padding: 18px 14px; box-shadow: 0 10px 30px rgba(10,42,94,.28); transform: rotate(6deg); }
.gr-mock-phone-check { width: 30px; height: 30px; border-radius: 50%; background: #1F5EFF; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 10px; }
.gr-mock-phone-txt { font-size: 12.5px; font-weight: 700; }
.gr-mock-phone-sub { font-size: 11px; color: #C9D6F0; margin-top: 3px; }

.gr-mock-float { position: absolute; left: -10px; bottom: -16px; background: #fff; border: 1px solid #DCE5F5; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: #0A2A5E; box-shadow: 0 6px 20px rgba(10,42,94,.14); display: flex; align-items: center; gap: 8px; }

@media (min-width: 860px) {
    .gr-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- franja de confianza ---------- */
.gr-trust { background: #F5F8FF; border-block: 1px solid #DCE5F5; padding-block: 18px; }
.gr-trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 13px; font-weight: 600; color: #5B6B8C; text-align: center; }

/* ---------- antes / con groden ---------- */
.gr-compare { display: grid; grid-template-columns: 1fr; gap: 20px; }
.gr-compare-col { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; padding: 28px 26px; }
.gr-compare-col h3 { margin: 0 0 16px; font-size: 16px; }
.gr-compare-con { background: #F5F8FF; border-color: #1F5EFF; }
.gr-compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gr-compare-col li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #0A2A5E; line-height: 1.45; }
.gr-compare-col .gr-ico-sm { margin-top: 2px; }

@media (min-width: 768px) {
    .gr-compare { grid-template-columns: 1fr 1fr; }
}

/* ---------- pasos ---------- */
.gr-steps { display: grid; grid-template-columns: 1fr; gap: 26px; position: relative; }
.gr-step { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; padding: 28px 24px; position: relative; }
.gr-step-num { font-size: 30px; font-weight: 800; color: #1F5EFF; line-height: 1; margin-bottom: 10px; }
.gr-step h3 { font-size: 16.5px; margin: 0 0 8px; }
.gr-step p { font-size: 14px; color: #5B6B8C; line-height: 1.55; margin: 0 0 16px; }
.gr-step-illus { background: #F5F8FF; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; }
.gr-illus-row { display: flex; justify-content: space-between; padding-block: 3px; color: #0A2A5E; }
.gr-illus-ticket { display: flex; flex-direction: column; gap: 4px; }
.gr-illus-ticket span { color: #5B6B8C; }
.gr-illus-ticket b { font-size: 14px; color: #0A2A5E; }
.gr-illus-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0A2A5E; }

@media (min-width: 900px) {
    .gr-steps { grid-template-columns: repeat(3, 1fr); }
    .gr-steps::before { content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 0; border-top: 2px dashed #DCE5F5; z-index: 0; }
}

/* ---------- demo interactiva ---------- */
.gr-demo-tag { display: inline-block; margin-top: 4px; background: #FFF6E5; color: #D97706; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.gr-demo { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.gr-demo-ticket { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(10,42,94,.06), 0 8px 24px -12px rgba(10,42,94,.18); padding: 26px 24px 22px; max-width: 340px; }
.gr-demo-ticket h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #5B6B8C; }
.gr-demo-biz { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.gr-demo-line { display: flex; justify-content: space-between; font-size: 14px; padding-block: 6px; border-bottom: 1px dashed #DCE5F5; }
.gr-demo-total { border-bottom: none; padding-top: 10px; font-weight: 700; }
.gr-demo-codigo { margin-top: 14px; font-size: 13px; color: #5B6B8C; }
.gr-demo-codigo b { color: #1F5EFF; }
.gr-demo-form { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; padding: 24px; }
.gr-field { display: block; margin-bottom: 14px; }
.gr-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #0A2A5E; }
.gr-field input { width: 100%; padding: 11px 13px; border: 1px solid #DCE5F5; border-radius: 10px; font: 500 14px 'Montserrat', sans-serif; }
.gr-field input:focus { outline: none; border-color: #1F5EFF; box-shadow: 0 0 0 3px rgba(31,94,255,.15); }
.gr-demo-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid #DCE5F5; }
.gr-demo-ok { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #16A34A; margin-bottom: 8px; }
.gr-demo-uuid { font-size: 12px; color: #5B6B8C; word-break: break-all; margin-bottom: 12px; }
.gr-demo-files { display: flex; gap: 10px; }

@media (min-width: 860px) {
    .gr-demo { grid-template-columns: auto 1fr; justify-content: center; }
}

/* ---------- funciones ---------- */
.gr-features-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.gr-feature-card { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; padding: 26px 22px; transition: box-shadow .2s ease, transform .2s ease; }
.gr-feature-card:hover { box-shadow: 0 8px 24px -10px rgba(10,42,94,.25); transform: translateY(-2px); }
.gr-feature-ico { width: 44px; height: 44px; border-radius: 12px; background: #EAF2FF; color: #1F5EFF; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.gr-feature-ico svg { width: 22px; height: 22px; }
.gr-feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.gr-feature-card p { font-size: 14px; color: #5B6B8C; line-height: 1.55; margin: 0; }

@media (min-width: 640px) { .gr-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gr-features-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- carrusel de plantillas pdf ---------- */
.gr-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.gr-pdf-mock { scroll-snap-align: start; flex: 0 0 240px; background: #fff; border: 1px solid #DCE5F5; border-radius: 14px; padding: 18px; box-shadow: 0 1px 2px rgba(10,42,94,.06), 0 4px 16px rgba(10,42,94,.06); }
.gr-pdf-bordered { border: 2px solid #1F5EFF; }
.gr-pdf-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.gr-pdf-head-split { flex-direction: column; gap: 6px; }
.gr-pdf-logo { font-weight: 700; font-size: 13px; color: #0A2A5E; background: #EAF2FF; padding: 4px 10px; border-radius: 6px; }
.gr-pdf-folio, .gr-pdf-ficha { font-size: 10.5px; color: #5B6B8C; }
.gr-pdf-lines div { height: 6px; background: #EAF2FF; border-radius: 4px; margin-bottom: 8px; }
.gr-pdf-lines div:nth-child(2) { width: 80%; }
.gr-pdf-lines div:nth-child(3) { width: 60%; }
.gr-pdf-lines div:nth-child(4) { width: 70%; }
.gr-pdf-qr { width: 36px; height: 36px; margin: 14px 0 12px; background:
    linear-gradient(90deg, #0A2A5E 50%, transparent 50%),
    linear-gradient(90deg, #0A2A5E 50%, transparent 50%),
    linear-gradient(#0A2A5E 50%, transparent 50%),
    linear-gradient(#0A2A5E 50%, transparent 50%);
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat; opacity: .55; }
.gr-pdf-caption { font-size: 13px; font-weight: 700; text-align: center; color: #0A2A5E; }

/* ---------- para quien ---------- */
.gr-who-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.gr-who-card { background: #fff; border: 1px solid #DCE5F5; border-radius: 16px; padding: 24px 22px; }
.gr-who-card h3 { font-size: 15.5px; margin: 0 0 8px; }
.gr-who-card p { font-size: 13.5px; color: #5B6B8C; line-height: 1.5; margin: 0 0 12px; }
.gr-who-ejemplo { display: inline-block; font-size: 12px; font-weight: 700; color: #1F5EFF; background: #EAF2FF; padding: 5px 10px; border-radius: 8px; }

@media (min-width: 640px) { .gr-who-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gr-who-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- precios ---------- */
.gr-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.gr-price-card { position: relative; background: #fff; border: 1px solid #DCE5F5; border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; }
.gr-price-featured { border: 2px solid #1F5EFF; box-shadow: 0 10px 30px -14px rgba(31,94,255,.35); }
.gr-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #1F5EFF; color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.gr-price-card h3 { font-size: 17px; margin: 0 0 10px; }
.gr-price-num { font-size: 32px; font-weight: 800; color: #0A2A5E; margin-bottom: 6px; }
.gr-price-num span { font-size: 14px; font-weight: 600; color: #5B6B8C; }
.gr-price-timbres { font-size: 13.5px; font-weight: 600; color: #1F5EFF; margin-bottom: 2px; }
.gr-price-vigencia { font-size: 12.5px; color: #5B6B8C; margin-bottom: 18px; }
.gr-price-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gr-price-card li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #0A2A5E; }
.gr-price-footnote { text-align: center; margin-top: 28px; font-size: 14px; color: #5B6B8C; }
.gr-price-footnote a { color: #1F5EFF; font-weight: 700; }

@media (min-width: 1024px) {
    .gr-pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
    .gr-price-featured { transform: scale(1.03); }
}

/* ---------- faq ---------- */
.gr-faq { display: flex; flex-direction: column; gap: 10px; }
.gr-faq-item { background: #fff; border: 1px solid #DCE5F5; border-radius: 12px; padding: 6px 18px; }
.gr-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; font-weight: 700; font-size: 15px; color: #0A2A5E; cursor: pointer; }
.gr-faq-item summary::-webkit-details-marker { display: none; }
.gr-faq-chevron { transition: transform .2s ease; }
.gr-faq-item[open] .gr-faq-chevron { transform: rotate(180deg); }
.gr-faq-item p { margin: 0 0 16px; font-size: 14px; color: #5B6B8C; line-height: 1.6; }

/* ---------- cta final ---------- */
.gr-cta-final { position: relative; background: linear-gradient(135deg, #1F5EFF, #0A2A5E 70%); color: #fff; padding-block: 72px; overflow: hidden; }
.gr-cta-final::before {
    content: "";
    position: absolute; top: 50%; right: -60px; transform: translateY(-50%);
    width: 420px; height: 420px;
    background: url('/assets/brand/svg/groden-isotipo.svg') no-repeat center / contain;
    opacity: .14; pointer-events: none;
}
.gr-cta-final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; text-align: center; align-items: center; }
.gr-cta-final h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 8px; }
.gr-cta-final p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; }
.gr-cta-final-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (min-width: 860px) {
    .gr-cta-final-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- footer ---------- */
.gr-footer { background: #0A2A5E; color: #C9D6F0; padding-top: 56px; }
.gr-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
.gr-footer-brand img { height: 26px; margin-bottom: 10px; }
.gr-footer-brand p { font-size: 13.5px; color: #C9D6F0; margin: 0; }
.gr-footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.gr-footer-col a { display: block; font-size: 14px; padding-block: 5px; color: #C9D6F0; }
.gr-footer-col a:hover { color: #fff; }
.gr-footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 18px 20px; text-align: center; font-size: 12.5px; color: #90A4CC; }

@media (min-width: 640px) {
    .gr-footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
}

/* ---------- responsive general ---------- */
@media (max-width: 480px) {
    .gr-mock-phone { width: 104px; padding: 14px 10px; top: -18px; right: -8px; }
    .gr-mock-phone-check { width: 24px; height: 24px; margin-bottom: 7px; }
    .gr-mock-phone-txt { font-size: 11px; }
    .gr-mock-phone-sub { font-size: 10px; }
    .gr-mock-float { font-size: 11px; padding: 8px 12px; left: -6px; bottom: -14px; }
    .gr-mock-stats { grid-template-columns: 1fr 1fr; }
}