/* RC3-R6 — Continuidad gráfica de la landing de ClickRestaurante.
   El hero aprobado no se reescribe. Solo se conecta visualmente el resto de la
   página con su identidad morado oscuro / naranja, respetando las secciones. */
:root {
  --cr-night: #220b35;
  --cr-night-2: #310e4b;
  --cr-violet: #632c86;
  --cr-bright: #ff8b1d;
  --cr-gold: #ffbc59;
  --cr-ink: #29163b;
  --cr-violet-soft: #f5eefb;
  --cr-cream: #fff6ed;
  --cr-stroke: #e7d6f0;
}
html {scroll-padding-top: 100px;}
body {background:#fff;color:var(--cr-ink);}
main {overflow:clip;}
.section {position:relative;isolation:isolate;padding-block:clamp(78px,8.3vw,126px);}
.section .wrap {position:relative;z-index:2;}
.section-eyebrow {display:flex;align-items:center;gap:12px;color:#753c91;font-size:11px;letter-spacing:.13em;font-weight:850;}
.section-eyebrow::before {content:'✦';display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border:1px solid #ffa44785;border-radius:9px;background:linear-gradient(145deg,#fff2e0,#ffe2c1);color:#e46c0b;font-size:15px;letter-spacing:0;box-shadow:0 4px 12px #e97d3020;}
.section-heading {align-items:end;gap:48px;margin-bottom:44px;}
.section-heading h2,.product-copy h2,.faq-layout h2 {font-weight:860;letter-spacing:-.062em;line-height:1.07;text-wrap:balance;color:var(--cr-ink);}
.section-heading h2 em,.product-copy h2 em,.faq-layout h2 em {color:var(--cr-violet);font-style:normal;}
.section-heading>p {max-width:345px;color:#70627c;line-height:1.75;}
/* Make the abrupt hero/white-section transition part of the brand journey. */
.feature-ribbon {background:linear-gradient(90deg,#311047 0%,#492063 50%,#28103c 100%);border-top:1px solid #fbad4842;border-bottom:2px solid #f48b216b;color:#fff;}
.feature-ribbon .ribbon-inner {min-height:78px;color:#fff0ff;letter-spacing:.10em;font-size:10px;}
.feature-ribbon .ribbon-inner i {width:7px;height:7px;background:var(--cr-bright);box-shadow:0 0 0 4px #ff922825;}
/* Section 1 — large and clearly dimensional cards like the hero panel. */
.light-section {background:radial-gradient(ellipse at 2% 12%,#e7d7ff86,transparent 32%),linear-gradient(180deg,#fff 0%,#faf6ff 100%);}
.light-section::before {content:'';position:absolute;top:46px;right:-110px;width:310px;height:310px;border:1px solid #b787d126;border-radius:50%;pointer-events:none;}
.flow-cards {gap:22px;}
.flow-card {border:1px solid #d9c7eaa6;border-radius:25px;box-shadow:0 20px 45px #36174611,0 5px 13px #3617460a;overflow:hidden;position:relative;transition:transform .23s ease,box-shadow .23s ease;}
.flow-card::before {content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#ff8c22,#e8a252,#6a308f);z-index:2;}
.flow-card:hover {transform:translateY(-5px);box-shadow:0 25px 55px #36174623;}
.flow-first {background:linear-gradient(170deg,#f2e7f7 0%,#f9f3fc 85%);}
.flow-second {background:linear-gradient(170deg,#fff0e1 0%,#fff9ef 85%);}
.flow-third {background:linear-gradient(170deg,#f2effa 0%,#fff 85%);}
.flow-head {color:#6a3985;font-weight:850;}
.flow-arrow {display:grid;place-items:center;width:30px;height:30px;background:#321345;border-radius:50%;color:var(--cr-gold);}
.flow-card h3 {font-size:clamp(19px,1.7vw,24px);font-weight:820;color:#311746;letter-spacing:-.045em;}
.flow-card p {color:#63546a;}
.pay-receipt strong {font-size:clamp(20px,2vw,27px)!important;letter-spacing:-.05em;}
/* Section 2 — the same dark-purple brand background used in the approved hero. */
.tool-section {background:radial-gradient(ellipse at 95% 16%,#74328a57,transparent 42%),radial-gradient(circle at 2% 96%,#ee782120,transparent 30%),linear-gradient(126deg,#230a36,#33104a 62%,#240b38);color:#fff;}
.tool-section::after {content:'';position:absolute;inset:0;opacity:.30;pointer-events:none;background:linear-gradient(157deg,transparent 56%,#ff8d2819 57%,transparent 58%),linear-gradient(168deg,transparent 78%,#ff8d2815 79%,transparent 80%);}
.tool-section .section-eyebrow {color:#ffe0b3;}
.tool-section .section-heading h2 {color:#fff;}
.tool-section .section-heading h2 em {color:#ff9d38;}
.tool-section .section-heading>p {color:#ded0e7;}
.tool-layout {gap:22px;}
.tool-feature {border:1px solid #b08bce55;border-radius:28px;box-shadow:0 18px 35px #0b041f50,inset 0 1px #fff6;}
.tool-feature:not(.ai-tool) {background:linear-gradient(140deg,#f0dff5,#eee3f5 80%);}
.ai-tool {background:linear-gradient(140deg,#fff0df,#ffe5cd 90%);}
.tool-copy h3 {color:#2d153d;}
.tool-feature .tool-label {color:#6c3287;}
.tool-feature .tool-copy p {color:#54445e;}
.extra-tools {gap:17px;}
.extra-tools>div {border:1px solid #be89d235;background:#ffffff0d;border-radius:17px;padding:13px 16px;}
.extra-tools b,.extra-tools strong {color:#fff;}
.extra-tools p,.extra-tools small {color:#dfcbe6;}
/* Section 3 — unified icons and a high-contrast conversion bar. */
.digital-showcase {background:radial-gradient(circle at 90% 25%,#ffdfb855,transparent 35%),linear-gradient(180deg,#fffaf5,#fff 100%);}
.digital-grid {gap:19px;}
.digital-card {border-radius:22px;border-color:#e9d6e8;box-shadow:0 11px 36px #2b0e3910;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.digital-card:hover {transform:translateY(-4px);border-color:#c991dc;box-shadow:0 21px 42px #2b0e3920;}
.digital-highlight {background:linear-gradient(135deg,#2e1046,#5e297b);border-color:#874aa6;box-shadow:0 14px 35px #2b0e392b;}
.digital-icon {background:#fff0dd;color:#e76c11;box-shadow:inset 0 0 0 1px #f3cfab;}
.digital-card h3 {color:#32174b;font-weight:800;}
.digital-highlight h3 {color:#fff;}
.digital-card p {color:#6a5a73;}
.digital-highlight p {color:#e5d7ed;}
.digital-cta {border-radius:20px;background:linear-gradient(108deg,#280e3e,#51246a);border:1px solid #8d55a8;color:#fff;padding:25px 29px;box-shadow:0 14px 34px #250b3e2a;}
.digital-cta strong {color:#fff;font-size:clamp(16px,1.5vw,20px);}
/* Section 4 — real templates remain independently styled, unified surrounding frame. */
.theme-promo {background:linear-gradient(180deg,#f5edf9,#f9f2fd);border-top:1px solid #e9d5f6;border-bottom:1px solid #e9d5f6;}
.theme-promo-grid {gap:19px;}
.theme-promo-card {border:2px solid #f5e0f566;border-radius:22px;box-shadow:0 17px 35px #38184f1e;transition:transform .23s ease,box-shadow .23s ease;min-height:270px;}
.theme-promo-card:hover {transform:translateY(-5px);box-shadow:0 25px 46px #38184f2b;}
.theme-promo-card .theme-card-link {background:#fff2;border-radius:11px;border:1px solid #ffffff70;font-weight:800;}
.theme-promo-note {color:#5f5072;}
/* Section 5 — a second dramatic dark zone, connected to hero's dashboard motif. */
.product-section {background:radial-gradient(ellipse at 0 20%,#82378b54,transparent 43%),linear-gradient(125deg,#2b103f,#1d0b30 70%,#301444);color:#fff;}
.product-section .section-eyebrow {color:#ffcc8c;}
.product-copy h2 {color:#fff;}
.product-copy h2 em {color:var(--cr-gold);}
.product-copy>p:not(.section-eyebrow) {color:#e4d5eb;}
.product-copy li {color:#f4e9f6;font-size:14px;}
.product-copy li:before {color:#35114b;background:#ff9a29;}
.product-image {border:1px solid #c48ce2a3;border-radius:23px;box-shadow:0 25px 70px #05000e90,0 0 60px #ac2ce71a;overflow:hidden;background:#fff;}
.product-image-bar {background:#fff5fc;color:#5f2c75;border-bottom:1px solid #e7d6ef;}
.product-image figcaption {background:#fff;color:#746780;}
/* Section 6 — premium pricing and prominent Pro/Plus conversion. */
.plans-section {background:radial-gradient(circle at 10% 8%,#d5b5ec44,transparent 31%),linear-gradient(180deg,#faf4ff,#fff9f4 90%);}
.trial-banner {background:radial-gradient(circle at 94% 30%,#7a418c7f,transparent 35%),linear-gradient(116deg,#250e3b,#4e2165);border:1px solid #9451aa;border-radius:25px;box-shadow:0 22px 50px #25103839;padding:clamp(23px,3vw,38px);}
.trial-banner-label {color:#ffbc72;}
.plan-grid {gap:22px;}
.plan-card {background:#fff;border:1px solid #e6d2ed;border-radius:23px;box-shadow:0 16px 34px #39214d14;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
.plan-card:hover {transform:translateY(-5px);box-shadow:0 26px 44px #39214d24;}
.plan-card.featured {background:linear-gradient(155deg,#321448,#4a2065 88%);border:2px solid #f9a23b;box-shadow:0 22px 50px #33134b36;}
.plan-card.featured :is(h3,.plan-price b,.plan-price span,.plan-description,.plan-card-head,li) {color:#fff!important;}
.plan-card.featured ul li span {color:#ffb350!important;}
.plan-card.featured .plan-card-head strong {background:#ff8b1d;color:#2a1432;}
.plan-card h3 {font-weight:840;}
.plan-card ul li {line-height:1.55;}
.plan-card .btn {width:100%;justify-content:center;}
.plan-note {color:#685776;}
/* Section 7 — footer-ready dark/light continuity. */
.faq-section {background:linear-gradient(180deg,#fff,#f9f2fd);}
.faq-items {border-top:2px solid #4b2064;}
.faq-items details {border-bottom:1px solid #decae9;}
.faq-items summary {color:#311747;}
.faq-items summary:hover {color:#8745aa;}
.faq-items details[open] {background:#fff;border-radius:13px;padding-inline:18px;box-shadow:0 9px 24px #32124c0e;}
.final-cta {position:relative;background:radial-gradient(ellipse at 98% 32%,#83388a70,transparent 40%),radial-gradient(ellipse at 18% 100%,#ff8b1c1c,transparent 35%),linear-gradient(115deg,#230936,#3b1455 68%,#29103f);border-top:3px solid #f38a22;padding-block:clamp(72px,8vw,112px);}
.final-cta .section-eyebrow {color:#ffd49a;}
.final-cta h2 {font-size:clamp(45px,5vw,72px);color:#fff;font-weight:860;}
.final-cta h2 em {color:#ff9b29;}
.site-footer {background:#180723;border-top:1px solid #ffffff25;}
/* Same primary/secondary button system on the entire site. */
main .btn-orange,.nav-cta .btn-orange {border:1px solid #ffc16a;background:linear-gradient(180deg,#ffb33d 0%,#ff891c 55%,#fa630b 100%);color:#21102f;box-shadow:0 7px 18px #ff6c2840;font-weight:850;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
main .btn-orange:hover,.nav-cta .btn-orange:hover {filter:brightness(1.07);box-shadow:0 10px 24px #ff6c285c;transform:translateY(-2px);}
main :is(.btn-dark,.btn-outline) {border-radius:13px;font-weight:800;}
.product-section .btn-dark,.theme-promo .btn-dark {background:#f68b24;color:#1d0828;}
/* Animation is responsive and explicitly disabled for reduced motion. */
@media (max-width:1000px) {
  .section {padding-block:78px;}
  .section-heading {gap:24px;}
  .feature-ribbon .ribbon-inner {overflow-x:auto;justify-content:flex-start;white-space:nowrap;scrollbar-width:thin;padding-block:13px;}
  .tool-layout {gap:17px;}
  .product-section .product-layout {gap:35px;}
  .theme-promo-grid {gap:14px;}
}
@media (max-width:720px) {
  .section {padding-block:64px;}
  .section-heading {align-items:flex-start;}
  .section-heading h2,.product-copy h2,.faq-layout h2 {font-size:clamp(36px,8.5vw,52px);}
  .section-heading>p {max-width:550px;}
  .flow-card:hover,.digital-card:hover,.theme-promo-card:hover,.plan-card:hover {transform:none;}
  .tool-section .tool-feature {min-height:600px;display:block;padding:28px 22px;}
  .tool-section .tool-copy {width:100%;max-width:100%;padding-bottom:290px;}
  .tool-section .tool-copy h3 {max-width:320px;font-size:clamp(29px,7.8vw,39px);}
  .tool-section .tool-copy p {max-width:340px;}
  .tool-section .menu-phone {width:174px;right:calc(50% - 87px);bottom:-45px;transform:rotate(6deg);}
  .tool-section .import-widget {width:min(275px,calc(100% - 46px));right:calc(50% - 137px);bottom:26px;transform:rotate(-3deg);}

  .tool-section .extra-tools>div {padding:11px 12px;}
  .digital-grid {gap:12px;}
  .product-layout {gap:30px;}
  .trial-banner {padding:24px;}
  .theme-promo-card {min-height:195px;}
  .plan-card.featured {transform:none;}
  .faq-items details[open] {padding-inline:12px;}
}
@media(prefers-reduced-motion:reduce) {
 .flow-card,.digital-card,.theme-promo-card,.plan-card,main .btn-orange {transition:none!important;transform:none!important;}
}
/* Layout-specific exceptions: preserve the approved hero buttons and centered plans headline. */
.site-header .nav-free.btn-orange,
.hero-approved .hero-actions .btn-orange {color:#fff;text-shadow:0 1px 2px #611f0360;}
.plans-section .section-heading.center-heading {align-items:center;justify-content:center;text-align:center;gap:10px;}
.plans-section .center-heading .section-eyebrow {align-self:center;justify-content:center;}
.plans-section .center-heading>p {margin-inline:auto;}