* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color:#1d2433; background:#ffffff; line-height:1.6; -webkit-font-smoothing:antialiased;
}

:root{
    --blue:#0057A3;
    --blue-900:#0B2574;
    --green:#3DA544;
    --red:#B5292E;
    --yellow:#F7A800;
    --text:#1d2433;
    --muted:#6b7280;
    --reveal-distance:24px;
    --reveal-duration:.7s;
    --reveal-ease:cubic-bezier(.2,.65,.2,1);
}

.container{ width:min(1200px,92%); margin-inline:auto; }
.section{ padding:72px 0; }
.center{ text-align:center; }
.round{ border-radius:20px; }
.shadow{ box-shadow:0 10px 30px rgba(0,0,0,.08); }

.site-header{
    position:sticky; top:0; background:rgba(255,255,255,.9);
    backdrop-filter:blur(8px); border-bottom:1px solid #eef2f7; z-index:50;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    gap:12px;
}
.logo-wrap{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-wrap img{ height:34px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ color:var(--text); text-decoration:none; font-weight:600; }
.nav a:hover{ color:var(--blue); }
.menu-toggle{ display:none; border:0; background:transparent; font-size:28px; line-height:1; }

.hero{
    position:relative; color:#fff; overflow:hidden;
    background:linear-gradient(135deg, var(--blue) 0%, #046596 60%, #0a3d6f 100%);
}
.hero .inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    align-items:center;
    padding:60px 0;
    min-height: 85vh;
}
.hero h1{ font-size: clamp(2.5rem, 5vw, 3.25rem); line-height:1.15; font-weight:800; letter-spacing:.2px; margin-bottom:16px; }
.hero h1 .em{ color:var(--yellow); }
.hero p.lead{ font-size:18px; color:#eaf3ff; margin-bottom:22px; max-width: 450px; }
.hero .badges{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; align-items: center; }
.small-note{ margin-top:12px; color:#e5ecf7; }

.hero::before, .hero::after{
    content:""; position:absolute; inset:auto auto -120px -120px;
    width:320px; height:320px; background:var(--red);
    transform:rotate(36deg); border-radius:24px; opacity:.9;
}
.hero::after{ left:auto; right:-140px; bottom:-140px; background:var(--green); transform:rotate(-24deg); }

@keyframes floatA{ 0%{transform:translate(0,0) rotate(36deg);} 50%{transform:translate(0,8px) rotate(40deg);} 100%{transform:translate(0,0) rotate(36deg);} }
@keyframes floatB{ 0%{transform:translate(0,0) rotate(-24deg);} 50%{transform:translate(0,-10px) rotate(-20deg);} 100%{transform:translate(0,0) rotate(-24deg);} }
.hero::before{ animation:floatA 8s ease-in-out infinite; }
.hero::after{ animation:floatB 9s ease-in-out infinite; }

.hero-phones-container {
    position: relative;
    height: 100%;
    min-height: 500px;
}
.phone-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    filter: drop-shadow(0 25px 30px rgba(0,0,0,0.3));
    animation: none;
}
.phone-svg-1 {
    width: 22vw;
    max-width: 330px;
    z-index: 10;
    transform: translate(-50%, -50%);
}
.phone-svg-2 {
    width: 18vw;
    max-width: 280px;
    z-index: 5;
    transform: translate(-125%, -50%) rotate(-10deg);
}
.phone-svg-3 {
    width: 18vw;
    max-width: 280px;
    z-index: 5;
    transform: translate(25%, -50%) rotate(10deg);
}

.phone{
    position:relative; margin-inline:auto; width:320px; height:640px;
    border-radius:40px; background:#111; border:10px solid #111;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:110px; height:18px; background:#000; border-radius:12px; }
.phone .screen{ position:absolute; inset:12px; border-radius:30px; background:#000; overflow:hidden; }
.phone .screen img{ width:100%; height:100%; object-fit:cover; display:block; }

.features .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
    background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:24px;
    display:flex; gap:14px; align-items:flex-start;
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.10); }
.card .ic{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#f3f7ff; flex-shrink:0; }
.card h3{ font-size:20px; margin-bottom:8px; }
.card p{ color:var(--muted); }

.ic .i { width:26px; height:26px; stroke-width:1.9; }
.i-blue  { color: var(--blue); }
.i-red   { color: var(--red); }
.i-green { color: var(--green); }
.i-yellow{ color: var(--yellow); }
.card:hover .i { transform: translateY(-1px); transition: transform .2s ease; }

.screens .row{
    display:flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(16px, 2vw, 24px); overflow: visible;
}
.screens .phone{
    flex: 0 1 auto; width: clamp(220px, 28vw, 320px); aspect-ratio: 375 / 812;
    position: relative; border-radius: 40px; background:#111;
    border: clamp(8px, 1.1vw, 12px) solid #111;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.screens .phone::before{
    content:""; position:absolute; top: clamp(6px, .6vw, 8px); left: 50%;
    transform: translateX(-50%); width: clamp(90px, 8vw, 110px);
    height: clamp(14px, 1.2vw, 18px); background:#000; border-radius: 999px;
}
.screens .phone .screen{
    position:absolute; inset: clamp(10px, 1vw, 12px);
    border-radius: clamp(26px, 2.5vw, 30px); background:#000; overflow:hidden;
}
.screens .phone .screen img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 980px){
    .screens .row{
        overflow:auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; padding-bottom: 10px;
        justify-content: flex-start;
    }
    .screens .phone{
        scroll-snap-align: start; flex: 0 0 80%; max-width: 320px;
    }
}

.community{ background:#0c1424; color:#e7ecf6; }
.community .grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.community .quote-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quote{ background:#0e1a31; border:1px solid #1f2e4d; border-radius:14px; padding:16px; color:#cfe0ff; }

.cta-section{ background:#f7fafc; text-align:center; }
.cta-section h2{ font-size:36px; margin-bottom:12px; }
.cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

.site-footer{ background:#0b1324; color:#cfd7ea; padding:28px 0; }
.site-footer .inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-footer a{ color:var(--text); text-decoration:none; }

.reveal{
    opacity:0; transform:translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
}
.reveal-up{}
.reveal-right{ transform:translateX(24px); }
.reveal-left{  transform:translateX(-24px); }
.reveal-scale{ transform:scale(.96); }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
    .reveal, .reveal-right, .reveal-left, .reveal-scale{
        transition:none !important; opacity:1 !important; transform:none !important; animation:none !important;
    }
    .card{ transition:none !important; }
    .hero::before, .hero::after{ animation:none !important; }
}

@media (max-width:980px){
    .nav{ display:none; }
    .menu-toggle{ display:block; }
    .hero .inner{ grid-template-columns:1fr; gap:40px; padding:64px 0; text-align: center;}
    .hero .hero-phones-container { order: -1; min-height: 40vh; margin-bottom: 20px; }
    .hero .badges { justify-content: center; }
    .hero h1{ font-size:40px; }
    .features .grid{ grid-template-columns:1fr; }
    .community .grid{ grid-template-columns:1fr; gap:26px; }
    .community .quote-list { grid-template-columns: 1fr; }
    .site-footer .inner{ flex-direction:column; text-align:center; }
    
    .phone-svg-1 { width: 45vw; }
    .phone-svg-2 { width: 38vw; transform: translate(-100%, -50%) rotate(-10deg); }
    .phone-svg-3 { width: 38vw; transform: translate(0%, -50%) rotate(10deg); }
}

.store-badge img {
    height: 52px;
    width: auto;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.store-badge:hover img {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}/*
Theme Name: RP Landing (Restaurante Popular)
Version: 1.8
*/

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color:#1d2433; background:#ffffff; line-height:1.6; -webkit-font-smoothing:antialiased;
}

:root{
    --blue:#0057A3;
    --blue-900:#0B2574;
    --green:#3DA544;
    --red:#B5292E;
    --yellow:#F7A800;
    --text:#1d2433;
    --muted:#6b7280;
    --reveal-distance:24px;
    --reveal-duration:.7s;
    --reveal-ease:cubic-bezier(.2,.65,.2,1);
}

.container{ width:min(1200px,92%); margin-inline:auto; }
.section{ padding:72px 0; }
.center{ text-align:center; }
.round{ border-radius:20px; }
.shadow{ box-shadow:0 10px 30px rgba(0,0,0,.08); }

.site-header{
    position:sticky; top:0; background:rgba(255,255,255,.9);
    backdrop-filter:blur(8px); border-bottom:1px solid #eef2f7; z-index:50;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    gap:12px;
}
.logo-wrap{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-wrap img{ height:34px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ color:var(--text); text-decoration:none; font-weight:600; }
.nav a:hover{ color:var(--blue); }
.menu-toggle{ display:none; border:0; background:transparent; font-size:28px; line-height:1; }

.hero{
    position:relative; color:#fff; overflow:hidden;
    background:linear-gradient(135deg, var(--blue) 0%, #046596 60%, #0a3d6f 100%);
}
.hero .inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    align-items:center;
    padding:60px 0;
    min-height: 85vh;
}
.hero h1{ font-size: clamp(2.5rem, 5vw, 3.25rem); line-height:1.15; font-weight:800; letter-spacing:.2px; margin-bottom:16px; }
.hero h1 .em{ color:var(--yellow); }
.hero p.lead{ font-size:18px; color:#eaf3ff; margin-bottom:22px; max-width: 450px; }
.hero .badges{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; align-items: center; }
.small-note{ margin-top:12px; color:#e5ecf7; }

.hero::before, .hero::after{
    content:""; position:absolute; inset:auto auto -120px -120px;
    width:320px; height:320px; background:var(--red);
    transform:rotate(36deg); border-radius:24px; opacity:.9;
}
.hero::after{ left:auto; right:-140px; bottom:-140px; background:var(--green); transform:rotate(-24deg); }

@keyframes floatA{ 0%{transform:translate(0,0) rotate(36deg);} 50%{transform:translate(0,8px) rotate(40deg);} 100%{transform:translate(0,0) rotate(36deg);} }
@keyframes floatB{ 0%{transform:translate(0,0) rotate(-24deg);} 50%{transform:translate(0,-10px) rotate(-20deg);} 100%{transform:translate(0,0) rotate(-24deg);} }
.hero::before{ animation:floatA 8s ease-in-out infinite; }
.hero::after{ animation:floatB 9s ease-in-out infinite; }

.hero-phones-container {
    position: relative;
    height: 100%;
    min-height: 500px;
}
.phone-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    filter: drop-shadow(0 25px 30px rgba(0,0,0,0.3));
    animation: none;
}
.phone-svg-1 {
    width: 22vw;
    max-width: 330px;
    z-index: 10;
    transform: translate(-50%, -50%);
}
.phone-svg-2 {
    width: 18vw;
    max-width: 280px;
    z-index: 5;
    transform: translate(-125%, -50%) rotate(-10deg);
}
.phone-svg-3 {
    width: 18vw;
    max-width: 280px;
    z-index: 5;
    transform: translate(25%, -50%) rotate(10deg);
}

.phone{
    position:relative; margin-inline:auto; width:320px; height:640px;
    border-radius:40px; background:#111; border:10px solid #111;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:110px; height:18px; background:#000; border-radius:12px; }
.phone .screen{ position:absolute; inset:12px; border-radius:30px; background:#000; overflow:hidden; }
.phone .screen img{ width:100%; height:100%; object-fit:cover; display:block; }

.features .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
    background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:24px;
    display:flex; gap:14px; align-items:flex-start;
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.10); }
.card .ic{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#f3f7ff; flex-shrink:0; }
.card h3{ font-size:20px; margin-bottom:8px; }
.card p{ color:var(--muted); }

.ic .i { width:26px; height:26px; stroke-width:1.9; }
.i-blue  { color: var(--blue); }
.i-red   { color: var(--red); }
.i-green { color: var(--green); }
.i-yellow{ color: var(--yellow); }
.card:hover .i { transform: translateY(-1px); transition: transform .2s ease; }

.screens .row{
    display:flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(16px, 2vw, 24px); overflow: visible;
}
.screens .phone{
    flex: 0 1 auto; width: clamp(220px, 28vw, 320px); aspect-ratio: 375 / 812;
    position: relative; border-radius: 40px; background:#111;
    border: clamp(8px, 1.1vw, 12px) solid #111;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.screens .phone::before{
    content:""; position:absolute; top: clamp(6px, .6vw, 8px); left: 50%;
    transform: translateX(-50%); width: clamp(90px, 8vw, 110px);
    height: clamp(14px, 1.2vw, 18px); background:#000; border-radius: 999px;
}
.screens .phone .screen{
    position:absolute; inset: clamp(10px, 1vw, 12px);
    border-radius: clamp(26px, 2.5vw, 30px); background:#000; overflow:hidden;
}
.screens .phone .screen img{ width:100%;