/* Pulso Studio V1.0.11 — three coordinated illustrative cards
   and small-screen ergonomics. This file loads after visual-v110.css. */

/* All three concept cards share one visual rhythm and the same lower status bar. */
.example-visual.website-concept,
.example-visual.inventory-concept {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  height: 340px;
  background:
    radial-gradient(ellipse at 54% 50%, #22549c43, transparent 78%),
    linear-gradient(155deg,#182a45,#101a2c 74%,#0e1929);
}
.example-visual.website-concept::before,
.example-visual.inventory-concept::before {
  content:"";
  position:absolute;
  inset:35px 0 0;
  pointer-events:none;
  z-index:0;
  opacity:.10;
  background-image:radial-gradient(circle,#86b7ff .75px,transparent 1px);
  background-size:17px 17px;
  mask-image:radial-gradient(ellipse at center,black 8%,transparent 78%);
}
.example-visual.website-concept > *,
.example-visual.inventory-concept > * {position:relative;z-index:1}
.example-visual.website-concept .concept-bar,
.example-visual.inventory-concept .concept-bar {
  flex:0 0 auto;
  height:37px;
  margin-bottom:15px;
  border-bottom-color:#8ab6ec24;
}
.example-visual .concept-name {
  color:#c5dbfa;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.06em;
  font-weight:650;
}
.example-visual.website-concept .flow-topline,
.example-visual.inventory-concept .flow-topline {margin-top:13px}
.example-visual > .flow-footer {
  flex:0 0 auto;
  margin-top:auto;
  margin-bottom:12px;
}
.example-visual > .flow-footer .flow-footer-label {min-width:0}
.example-visual > .flow-footer .flow-footer-label strong {white-space:nowrap}
.example-visual > .flow-footer .flow-footer-label small {white-space:nowrap}

/* Site concept: a miniature landing page, not just a large headline. */
.site-preview {
  display:block;
  min-width:0;
  flex:0 0 auto;
  height:159px;
  margin-top:12px;
  overflow:hidden;
  border:1px solid #628abb65;
  border-radius:11px;
  background:linear-gradient(135deg,#172b47,#101e32);
  box-shadow:inset 0 1px 0 #ffffff12,0 10px 24px #03081653;
}
.site-preview-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:31px;
  padding:0 12px;
  border-bottom:1px solid #8cacd22c;
  color:#dcecff;
}
.site-preview-brand {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:-.02em;
}
.site-preview-brand i {
  width:10px;
  height:10px;
  display:inline-block;
  background:linear-gradient(145deg,#2d8fff,#78baff);
  border-radius:3px 6px 3px 6px;
  box-shadow:0 0 11px #318cff4f;
}
.site-preview-nav{display:flex;gap:5px;align-items:center}
.site-preview-nav i{display:block;height:3px;width:16px;border-radius:5px;background:#5f7eaa}
.site-preview-nav i:nth-child(2){width:11px}
.site-preview-nav i:nth-child(3){width:13px;background:#65b6e7}
.site-preview-main {
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(58px,.72fr);
  height:calc(100% - 31px);
  align-items:center;
  gap:5px;
  padding:11px 12px;
  position:relative;
}
.site-preview-copy {display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.site-preview-copy > strong {
  display:block;
  font-size:19px;
  font-weight:750;
  line-height:1.11;
  letter-spacing:-.045em;
  color:#eff6ff;
  max-width:195px;
}
.site-preview-copy > small {
  display:block;
  margin-top:5px;
  font-size:10px;
  line-height:1.35;
  color:#b8cde7;
  max-width:210px;
}
.site-preview-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:10px;
  padding:6px 9px;
  border-radius:5px;
  background:linear-gradient(120deg,#256ee0,#2b87f7);
  color:white;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.site-preview-cta .icon {width:12px;height:12px}
.site-preview-art {
  align-self:stretch;
  min-width:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.site-preview-art::before {
  content:"";
  position:absolute;
  width:104px;
  aspect-ratio:1;
  border-radius:24px;
  border:1px solid #8ec9ff55;
  background:linear-gradient(145deg,#82c8ff24,#225eba30);
  transform:rotate(-22deg) translate(10px,5px);
  box-shadow:0 0 27px #2e8fff40;
}
.site-preview-orb {
  position:relative;
  width:57px;
  height:57px;
  border-radius:50%;
  background:radial-gradient(circle at 26% 22%,#a3deff,#3979c8 53%,#132f64 83%);
  box-shadow:inset -9px -11px 20px #0d244599,0 0 22px #4e9cff40;
}
.site-preview-orb::after {
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid #93ccff85;
  border-radius:50%;
  transform:rotateX(66deg) rotate(-25deg);
}

/* Stock concept: one consistent mini-dashboard with meaningful hierarchy. */
.inventory-preview {
  min-width:0;
  flex:0 0 auto;
  display:block;
  margin-top:12px;
  padding:10px 12px 7px;
  border:1px solid #628abb60;
  border-radius:11px;
  background:#0c1a2bc0;
  box-shadow:inset 0 1px 0 #ffffff10,0 9px 22px #03081638;
}
.inventory-kpis {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.inventory-kpis > span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  padding:8px 10px;
  border:1px solid #5a83b550;
  border-radius:7px;
  background:linear-gradient(135deg,#253e5c,#1b304d);
}
.inventory-kpis small {font-size:10px;line-height:1.3;color:#b9cfeb}
.inventory-kpis strong {font-size:18px;line-height:1.1;color:#f3f8ff;font-weight:750}
.inventory-list{display:block;margin-top:6px}
.inventory-list > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 2px;
  min-width:0;
  border-top:1px solid #45617b52;
}
.inventory-list > span:first-child{border-top:0}
.inventory-list small {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:10px;
  color:#cbdcf0;
  line-height:1.25;
}
.inventory-list strong {white-space:nowrap;font-size:10px;font-weight:650;color:#e4f2ff;line-height:1.25}
.inventory-list strong.inventory-low {color:#f4cc89}
.inventory-dot {
  display:inline-block;
  flex:0 0 auto;
  height:7px;
  width:7px;
  background:#75c6ce;
  border-radius:2px;
}
.inventory-dot.blue {background:#78a7f1}
.inventory-dot.amber {background:#dcb26c}

/* The desktop still reserves height when changing hero tabs; mobile does not. */
@media (max-width:760px) {
  .demo-window {display:block}
  .demo-window .demo-panel[hidden] {display:none!important}
  .demo-window .demo-panel {min-height:0;padding:20px 19px 22px}
  #demo-site .mini-site-nav {padding-bottom:13px}
  #demo-site .mini-site-hero {padding-top:16px}
  #demo-site .mini-site-hero h2 {margin-top:10px}
  #demo-site .mini-site-hero p {margin-top:9px;line-height:1.55}
  #demo-site .mini-site-bottom {margin-top:16px;padding-top:12px}
  #demo-estoque .dashboard-head,#demo-financeiro .dashboard-head {margin-bottom:17px}
  #demo-estoque .metric-grid {margin-bottom:13px}
  #demo-estoque .metric-grid>div {padding:10px 12px}
  #demo-estoque .demo-table th {padding-bottom:8px}
  #demo-estoque .demo-table td {padding:10px 5px}
  #demo-estoque .panel-note,#demo-financeiro .panel-note {
    margin-top:13px;
    line-height:1.55;
  }
  #demo-financeiro .finance-summary {padding:15px;gap:12px;margin-bottom:12px}
  #demo-financeiro .finance-rows > div {padding:10px 0}
  .showcase-caption {margin-top:13px}

  /* Compact the project form without removing its fields or WhatsApp logic. */
  .contact-section .project-form {padding:19px 19px 22px;border-radius:14px}
  .project-form .form-heading {padding-bottom:15px;margin-bottom:17px}
  .project-form .form-heading h3 {font-size:21px;line-height:1.25;margin-top:6px}
  .project-form .form-heading p {margin-top:7px;font-size:13px;line-height:1.45}
  .project-form .form-row {gap:13px;margin-bottom:18px}
  .project-form label,.project-form legend {font-size:13px;line-height:1.45}
  .project-form input:not([type=radio]):not([type=checkbox]) {
    min-height:44px;
    padding:10px 12px;
    margin-top:6px;
    font-size:16px;
  }
  .project-form textarea {
    padding:10px 12px;
    margin-top:6px;
    min-height:105px;
    font-size:16px;
  }
  .project-form input::placeholder,.project-form textarea::placeholder {font-size:14px}
  .project-form fieldset {margin-bottom:17px}
  .project-form legend {margin-bottom:8px}
  .project-form .service-choices {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .project-form .service-choice {min-width:0}
  .project-form .service-choice > span {
    display:flex;
    flex-direction:column;
    gap:0;
    height:100%;
    min-height:104px;
    padding:11px 24px 10px 11px;
  }
  .project-form .service-choice>span>.icon {
    display:block;
    flex:0 0 auto;
    width:17px;
    height:17px;
    margin-bottom:8px;
  }
  .project-form .service-choice input {top:12px;right:11px;width:16px;height:16px}
  .project-form .service-choice strong {font-size:13px;line-height:1.3}
  .project-form .service-choice small {font-size:11px;line-height:1.35;margin-top:4px}
  .project-form .feature-choices {gap:6px}
  .project-form .feature-choice > span {padding:7px 9px;min-height:34px;font-size:12px}
  .project-form .support-choice {gap:9px;font-size:12px;line-height:1.45}
  .project-form .field-help {font-size:12px;line-height:1.45;margin:6px 0 14px}
  .project-form .form-footer {margin-top:16px;padding-top:15px}
  .project-form .form-footer > p:first-child {margin-bottom:11px;font-size:12px}
  .project-form .form-footer > .button {
    font-size:14px;
    line-height:1.35;
    min-height:47px;
    padding:11px 13px;
    gap:9px;
  }
  .project-form .privacy-note {font-size:11px;line-height:1.5;margin-top:10px}

  /* Coordinated concepts: smaller font sizes without shrinking readability. */
  .example-visual.website-concept,
  .example-visual.inventory-concept {height:314px}
  .example-visual.website-concept .concept-bar,
  .example-visual.inventory-concept .concept-bar {height:34px;margin-bottom:12px}
  .example-visual .concept-name {font-size:13px}
  .example-visual.website-concept .flow-topline,
  .example-visual.inventory-concept .flow-topline {margin-top:11px}
  .site-preview {height:145px;margin-top:10px}
  .site-preview-copy>strong {font-size:17px}
  .site-preview-copy>small {font-size:10px}
  .inventory-preview {margin-top:10px;padding:9px 10px 6px}
  .inventory-kpis > span {padding:7px 9px}
  .inventory-list > span {padding:5px 1px}
  .example-visual > .flow-footer {margin-bottom:9px}
}
@media (max-width:500px) {
  .demo-window .demo-panel {padding:18px 17px 19px}
  .example-visual.website-concept,
  .example-visual.inventory-concept {height:300px}
  .site-preview {height:132px}
  .site-preview-main {padding:8px 10px}
  .site-preview-top {padding-inline:10px}
  .site-preview-copy>strong {font-size:16px}
  .site-preview-copy>small {font-size:9px}
  .site-preview-cta {font-size:9px;padding:5px 7px;margin-top:7px}
  .site-preview-orb {width:45px;height:45px}
  .site-preview-art::before {width:76px;height:76px}
  .inventory-kpis small {font-size:9px}
  .inventory-kpis strong {font-size:16px}
  .inventory-list small,.inventory-list strong {font-size:9px}
  .example-visual > .flow-footer {padding:10px;gap:8px}
  .example-visual > .flow-footer .flow-footer-label strong {font-size:10px}
  .example-visual > .flow-footer .flow-footer-label small {font-size:8px}
  .project-form .service-choice>span {min-height:99px}
  .project-form .service-choice strong {font-size:12.5px}
  .project-form .service-choice small {font-size:10.5px}
  .project-form .form-heading h3 {font-size:20px}
}
@media (max-width:380px) {
  .project-form .service-choices {grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-form .service-choice > span {min-height:100px;padding:10px 20px 10px 9px}
  .project-form .service-choice strong {font-size:12px}
  .project-form .service-choice small {font-size:10px}
  .project-form .service-choice input {right:8px;top:11px}
  .project-form .service-choice>span>.icon {margin-bottom:7px}
  .example-visual.website-concept,
  .example-visual.inventory-concept {padding-inline:18px}
  .example-visual.website-concept .concept-bar,
  .example-visual.inventory-concept .concept-bar {margin-inline:-18px}
  .site-preview-main {grid-template-columns:minmax(0,1.2fr) minmax(48px,.8fr)}
  .site-preview-copy>strong {font-size:14px}
  .site-preview-cta {font-size:8.5px}
  .site-preview-orb {width:38px;height:38px}
  .inventory-kpis>span {padding:6px 7px}
  .inventory-list small,.inventory-list strong {font-size:8.5px}
  .example-visual > .flow-footer .flow-footer-label small {font-size:7.5px}
}


/* V1.0.13 — Desktop only: give the miniature site an intentional gap
   above the "Presença profissional" status strip. Keep the 3 equal-height
   card surfaces and their mobile layouts exactly as they were. */
@media (min-width: 761px) {
  .example-visual.website-concept .concept-bar {
    margin-bottom: 12px;
  }
  .example-visual.website-concept .flow-topline {
    margin-top: 11px;
  }
  .example-visual.website-concept .site-preview {
    height: 150px;
    margin-top: 10px;
    margin-bottom: 12px;
  }
  .example-visual.website-concept .site-preview-main {
    padding-block: 5px;
  }
}