/* PorteroQR · Página pública */

body.landing {
    display: block;
    min-height: 100vh;
    background: #fff;
    color: #172235;
}

.landing-header {
    width: min(100% - 40px, 1180px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding: 19px 0;
}

.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: #172235; font-weight: 800; font-size: 19px; }
.landing-brand__mark { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
.landing-nav { display: flex; align-items: center; gap: 24px; }
.landing-nav a { color: #56687e; font-size: 14px; font-weight: 700; }
.landing-nav__login { padding: 10px 15px; border: 1px solid #dbe4ee; border-radius: 9px; color: #25364d !important; }

.landing-hero {
    overflow: hidden;
    position: relative;
    background: linear-gradient(118deg, #f0fbf3 0%, #f8fcff 55%, #edf6ff 100%);
}

.landing-hero::before {
    position: absolute;
    top: -270px;
    right: -120px;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: rgba(37, 211, 102, .11);
    content: "";
}

.hero-inner {
    width: min(100% - 40px, 1180px);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(40px, 7vw, 100px);
    min-height: 600px;
    margin: 0 auto;
    padding: 72px 0;
}

.hero-copy { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #b9eac8; border-radius: 999px; background: #fff; color: #13773d; font-size: 13px; font-weight: 800; }
.hero-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #24b65d; content: ""; }
.hero-title { max-width: 640px; margin: 19px 0; color: #162337; font-size: clamp(39px, 5vw, 64px); letter-spacing: -.055em; line-height: 1.02; }
.hero-title span { color: #159447; }
.hero-text { max-width: 555px; color: #5d6f84; font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.hero-primary { background: #168447; color: #fff; box-shadow: 0 12px 25px rgba(22, 132, 71, .22); }
.hero-primary:hover { background: #0f7139; color: #fff; }
.hero-secondary { border: 1px solid #cedae7; background: #fff; color: #2c4058; }
.hero-secondary:hover { border-color: #9bb2c9; color: #172235; }
.hero-note { margin-top: 15px; color: #8090a1; font-size: 13px; }

.hero-visual { position: relative; z-index: 1; display: grid; place-items: center; }
.visual-phone { width: min(100%, 330px); padding: 11px; border: 9px solid #1c293a; border-radius: 37px; background: #1c293a; box-shadow: 0 30px 55px rgba(25, 52, 79, .22); transform: rotate(4deg); }
.visual-phone__screen { overflow: hidden; min-height: 520px; border-radius: 22px; background: #f8fbff; }
.visual-phone__bar { width: 88px; height: 21px; margin: 0 auto; border-radius: 0 0 13px 13px; background: #1c293a; }
.visual-app-top { display: flex; align-items: center; gap: 8px; padding: 20px 18px 16px; background: #fff; color: #25354a; font-size: 13px; font-weight: 800; }
.visual-app-top__bell { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.visual-screen-content { padding: 28px 19px; }
.visual-qr { width: 134px; height: 134px; margin: 4px auto 22px; padding: 12px; border: 1px solid #d8e4ec; border-radius: 15px; background: repeating-linear-gradient(45deg, #1b2a3c 0 6px, #fff 6px 12px, #1b2a3c 12px 18px, #fff 18px 24px); box-shadow: inset 0 0 0 10px #fff; }
.visual-message { padding: 16px; border-radius: 15px; background: #fff; box-shadow: 0 8px 18px rgba(30, 57, 84, .08); }
.visual-message__meta { color: #8a9aae; font-size: 11px; font-weight: 700; }
.visual-message h3 { margin: 7px 0; font-size: 17px; }
.visual-message p { color: #6e7f94; font-size: 12px; line-height: 1.5; }
.visual-answer { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 17px; border-radius: 10px; background: #e84646; color: #fff; font-size: 13px; font-weight: 800; }
.visual-floating { position: absolute; right: -18px; bottom: 47px; padding: 13px 16px; border: 1px solid #d7ebdd; border-radius: 13px; background: #fff; box-shadow: 0 15px 30px rgba(28, 63, 42, .12); color: #19713d; font-size: 13px; font-weight: 800; transform: rotate(-4deg); }

.landing-section { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 94px 0; }
.section-heading { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-kicker { color: #168447; font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.section-heading h2 { margin: 9px 0 12px; font-size: clamp(30px, 4vw, 43px); letter-spacing: -.04em; }
.section-heading p { color: #6c7d90; font-size: 16px; line-height: 1.6; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { padding: 22px; border: 1px solid #e2e9f0; border-radius: 16px; background: #fff; }
.step__number { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 18px; border-radius: 9px; background: #e7f8ed; color: #148442; font-size: 13px; font-weight: 850; }
.step h3 { font-size: 17px; }
.step p { margin-top: 8px; color: #718196; font-size: 14px; line-height: 1.55; }

.landing-section--uses { padding-top: 12px; }
.use-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.use-case { position:relative; display:block; padding:22px; border:1px solid #e1e9f1; border-radius:16px; background:#fff; color:inherit; text-decoration:none; transition:transform .2s, border-color .2s, box-shadow .2s; }
.use-case:hover { border-color:#98cdae; box-shadow:0 12px 24px rgba(25,73,49,.1); color:inherit; transform:translateY(-3px); }
.use-case > .use-case__emoji { display:grid; width:40px; height:40px; place-items:center; margin-bottom:15px; border-radius:11px; background:#edf7f0; font-size:19px; }
.use-case h3 { font-size:16px; }
.use-case p { margin-top:7px; color:#718196; font-size:14px; line-height:1.55; }
.use-case small { display:block; margin-top:15px; color:#168447; font-size:13px; font-weight:850; }
.use-case--casa { border:2px solid #31c886; background:linear-gradient(145deg, #effcf5, #fff); box-shadow:0 12px 26px rgba(29,152,96,.11); }
.use-case--casa:hover { border-color:#15955a; }
.use-case__badge { position:absolute; top:15px; right:15px; padding:5px 8px; border-radius:999px; background:#118552; color:#fff; font-size:10px; font-weight:900; letter-spacing:.07em; }
.use-case__badge--publico { background:#3159c7; }

.landing-section--compare { padding-top:20px; }
.landing-compare__table-wrap { overflow-x:auto; border:1px solid #e1e9f1; border-radius:18px; background:#fff; box-shadow:0 12px 26px rgba(29,49,76,.05); }
.landing-compare__table { width:100%; min-width:760px; border-collapse:collapse; font-size:13px; }
.landing-compare__table th, .landing-compare__table td { padding:14px 15px; border-bottom:1px solid #e7eef5; text-align:center; }
.landing-compare__table thead th { background:#f4f8fc; color:#364c68; font-size:12px; font-weight:850; }
.landing-compare__table th:first-child { text-align:left; }
.landing-compare__table tbody th { color:#50637d; font-weight:700; }
.landing-compare__table tbody td { color:#198456; font-size:16px; font-weight:850; }
.landing-compare__table tbody td[colspan] { color:#5c708a; font-size:13px; font-weight:650; }
.landing-compare__table tbody tr:last-child th, .landing-compare__table tbody tr:last-child td { border-bottom:0; }

.features-wrap { background: #172638; }
.features-wrap .landing-section { padding: 88px 0; }
.features-wrap .section-heading h2 { color: #fff; }
.features-wrap .section-heading p { color: #b5c2d0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.04); }
.feature__icon { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 17px; border-radius: 11px; background: rgba(92, 222, 132, .15); font-size: 19px; }
.feature h3 { color: #fff; font-size: 17px; }
.feature p { margin-top: 8px; color: #b8c5d3; font-size: 14px; line-height: 1.55; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 850px; margin: 0 auto; }
.plan { padding: 32px; border: 1px solid #e0e8f0; border-radius: 20px; background: #fff; }
.plan--featured { border: 2px solid #20a651; box-shadow: 0 15px 35px rgba(30, 141, 77, .1); }
.plan__label { color: #13783f; font-size: 13px; font-weight: 850; }
.plan h3 { margin-top: 10px; font-size: 26px; letter-spacing: -.03em; }
.plan__price { margin: 20px 0 5px; font-size: 36px; font-weight: 850; letter-spacing: -.05em; }
.plan__price small { color: #75859a; font-size: 14px; font-weight: 650; letter-spacing: 0; }
.plan p { color: #6e7e91; font-size: 14px; line-height: 1.55; }
.plan ul { margin: 20px 0 26px; padding: 0; list-style: none; }
.plan li { margin: 10px 0; color: #4d6075; font-size: 14px; }
.plan li::before { margin-right: 8px; color: #179247; content: "✓"; font-weight: 850; }
.plan__button { display: flex; min-height: 47px; align-items: center; justify-content: center; border: 1px solid #cfdce7; border-radius: 11px; color: #2b4058; font-size: 14px; font-weight: 800; }
.plan--featured .plan__button { border-color: #168447; background: #168447; color: #fff; }

.landing-footer { border-top: 1px solid #e7edf3; }
.landing-footer__inner { width: min(100% - 40px, 1120px); display: flex; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 28px 0; color: #7c8ca0; font-size: 13px; }

.landing-support { padding: 28px 20px 64px; background: linear-gradient(135deg, #eaf8ee, #edf6ff); }
.landing-support__inner { width: min(100%, 1120px); display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 0 auto; padding: 36px 40px; border: 1px solid #d5e9dc; border-radius: 22px; background: #fff; box-shadow: 0 15px 35px rgba(28, 72, 49, .08); }
.landing-support__eyebrow { margin: 0 0 7px; color: #168447; font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.landing-support h2 { max-width: 580px; margin: 0; color: #1b2e42; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.035em; }
.landing-support p:not(.landing-support__eyebrow) { max-width: 620px; margin: 10px 0 0; color: #657991; font-size: 15px; line-height: 1.55; }
.landing-support__button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 12px; background: #168447; color: #fff; box-shadow: 0 10px 22px rgba(22, 132, 71, .2); font-size: 14px; font-weight: 850; text-align: center; }
.landing-support__button:hover { background: #0f7139; color: #fff; }
.landing-support__button small { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.3); font-size: 12px; font-weight: 750; }

.landing-partners { padding-top: 72px; }
.authorized-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.authorized-partner { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 17px; border: 1px solid #e1e9f1; border-radius: 16px; background: #fff; }
.authorized-partner > img, .authorized-partner__avatar { width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; object-fit: cover; background: #eaf6ef; }
.authorized-partner__avatar { display: grid; place-items: center; padding: 13px; }
.authorized-partner__avatar img { width: 100%; height: 100%; object-fit: contain; }
.authorized-partner strong, .authorized-partner span, .authorized-partner small { display: block; }
.authorized-partner strong { color: #263b54; font-size: 15px; }
.authorized-partner span { margin-top: 3px; color: #73849a; font-size: 13px; }
.authorized-partner small { margin-top: 7px; color: #168447; font-size: 12px; font-weight: 800; }

@media (max-width: 880px) {
    .hero-inner { grid-template-columns: 1fr; padding: 62px 0 75px; text-align: center; }
    .hero-text, .hero-title { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { margin-top: 10px; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .use-cases { grid-template-columns:repeat(2,1fr); }
    .feature-grid { grid-template-columns: 1fr; }
    .landing-support__inner { align-items: flex-start; flex-direction: column; }
    .authorized-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .landing-header, .hero-inner, .landing-section, .landing-footer__inner { width: min(100% - 28px, 1120px); }
    .landing-nav a:not(.landing-nav__login) { display: none; }
    .hero-inner { min-height: 0; padding: 47px 0 58px; }
    .hero-title { font-size: 42px; }
    .hero-text { font-size: 16px; }
    .hero-primary, .hero-secondary { width: 100%; }
    .visual-phone { width: 282px; }
    .visual-phone__screen { min-height: 450px; }
    .visual-floating { right: -4px; bottom: 30px; }
    .landing-section { padding: 66px 0; }
    .steps, .use-cases, .plans { grid-template-columns: 1fr; }
    .landing-compare__table-wrap { border-radius:14px; }
    .landing-support { padding: 18px 14px 44px; }
    .landing-support__inner { padding: 28px 23px; border-radius: 18px; }
    .landing-support__button { width: 100%; }
    .landing-footer__inner { align-items: start; flex-direction: column; }
    .authorized-partners { grid-template-columns: 1fr; }
}