/* ============================================================
   Dizarro — home.css (só a página inicial)
   ============================================================ */

.hero { padding: clamp(2.25rem,6vw,4rem) var(--gutter) clamp(2.5rem,6vw,4rem); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero .eyebrow { margin-bottom: 1.3rem; display: flex; gap: .6rem; align-items: center; }
.hero .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--hivis); }
.hero h1 { font-size: var(--t-4); letter-spacing: -.015em; text-transform: uppercase; }
.hero h1 .b { color: var(--blueprint); display: block; }
.hero h1 .o { color: var(--hivis); }
.hero p.sub { margin-top: 1.5rem; max-width: 46ch; font-size: 1.12rem; color: var(--graphite); }
.hero .cta-row { margin: 2rem 0 2.5rem; }

/* foto do herói com moldura técnica + mini-legenda */
.hero-photo { position: relative; border: 1px solid var(--line); }
.hero-photo img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink); }
@media (max-width: 900px) { .hero-photo { max-width: 460px; } }
.hero-photo .tag { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .55rem; }
.hero-photo .rule { position: absolute; right: .6rem; top: .6rem; font-family: var(--f-mono); font-size: .58rem; color: var(--paper); background: var(--hivis); color: var(--hivis-ink); padding: .12rem .4rem; letter-spacing: .06em; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr 1fr; } }
.trust div { padding: 1.1rem var(--gutter); border-right: 1px solid var(--line); }
.trust div:last-child { border-right: 0; }
@media (max-width: 720px) { .trust div:nth-child(2n) { border-right: 0; } .trust div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.trust .n { font-family: var(--f-display); font-weight: 800; font-size: 1.85rem; font-variant-numeric: tabular-nums; }
.trust .n .u { font-family: var(--f-mono); font-size: .85rem; color: var(--graphite); }
.trust .n .plus { color: var(--hivis); }
.trust .k { font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--graphite); margin-top: .2rem; }

/* legenda / serviços */
.legend { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.4rem 3rem; }
@media (max-width: 820px) { .legend { grid-template-columns: 1fr; gap: 2rem; } }
.disc h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: baseline; gap: .55rem; }
.disc h3::before { content: attr(data-code); font-family: var(--f-mono); font-size: .7rem; color: var(--hivis); font-weight: 500; }
.disc-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 .9rem; }
.disc-tags span { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .03em; padding: .18rem .5rem; border: 1px solid var(--line); color: var(--graphite); }
.disc ul { display: block; }
.disc li { padding: .4rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.disc li::before { content: "— "; color: var(--hivis); }
.disc .more { display: inline-block; margin-top: .9rem; font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; box-shadow: inset 0 -2px 0 var(--hivis); }
.disc .more:hover { color: var(--hivis); }

/* passos */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--paper); padding: 1.5rem 1.5rem 1.7rem; }
.step .step-no { font-family: var(--f-mono); color: var(--hivis); font-size: .78rem; }
.step h3 { font-size: 1.12rem; margin: .5rem 0; text-transform: uppercase; }
.step p { font-size: .92rem; color: var(--graphite); }

/* pranchas / trabalhos */
.plates { display: flex; gap: 1px; overflow-x: auto; background: var(--line); border: 1px solid var(--line); scroll-snap-type: x mandatory; }
.plate { scroll-snap-align: start; flex: 0 0 clamp(230px,42vw,320px); background: var(--paper); position: relative; }
.plate .img { aspect-ratio: 4/3; display: block; object-fit: cover; width: 100%; background:
  repeating-linear-gradient(135deg, var(--blueprint-soft) 0 8px, transparent 8px 16px),
  linear-gradient(160deg, var(--paper-2), var(--paper)); }
.plate .cap { padding: .85rem 1rem 1.1rem; }
.plate .cap b { font-family: var(--f-display); font-weight: 700; font-size: 1rem; display: block; }
.plate .cap span { font-family: var(--f-mono); font-size: .64rem; color: var(--graphite); text-transform: uppercase; letter-spacing: .05em; }
.plate .tape { position: absolute; top: .8rem; left: .8rem; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; background: var(--hivis); color: var(--hivis-ink); padding: .15rem .45rem; text-transform: uppercase; }
.plates a.plate { text-decoration: none; color: inherit; }
.plates a.plate figcaption { display: block; padding: .85rem 1rem 1.1rem; font-family: var(--f-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite); }
.plates a.plate:hover figcaption b { color: var(--hivis); }
.plates a.plate:hover .img { opacity: .92; }

/* zona */
.zona { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
@media (max-width: 820px) { .zona { grid-template-columns: 1fr; } }
.zona ul { margin-top: 1.1rem; }
.zona li { display: flex; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.zona li .mono { flex: 0 0 4.5rem; }
.radius { width: 100%; height: auto; }
.radius circle.r { fill: var(--blueprint-soft); stroke: var(--blueprint); stroke-dasharray: 4 4; }
.radius .hub { fill: var(--hivis); }
.radius .city { fill: var(--ink); }
.radius text { font-family: var(--f-mono); font-size: 11px; fill: var(--graphite); }

/* testemunhos */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; gap: 1.5rem; } }
.quote { border-top: 2px solid var(--ink); padding-top: 1rem; }
.quote .stars { color: var(--hivis); letter-spacing: .15em; font-size: .8rem; margin-bottom: .6rem; }
.quote p { font-size: 1.02rem; }
.quote cite { display: block; margin-top: 1rem; font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite); font-style: normal; }

/* faq */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .85rem; font-family: var(--f-mono); color: var(--hivis); font-size: 1.1rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding: 0 1.5rem 1.1rem 0; color: var(--graphite); font-size: .96rem; max-width: 68ch; }