/* Layout 6 — Bento Mosaic: grid assimétrico tipo dashboard, azul cobalto vívido */

:root {
  --ink: #14161c; --ink-soft: #5a5f6b; --paper: #f4f5f7; --paper-raised: #ffffff;
  --line: #e3e5ea; --cobalt: #2a5cff; --cobalt-soft: #e7edff;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius: 20px; --shadow: 0 20px 40px -24px rgb(20 22 28 / .25);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
:focus-visible { outline-color: var(--cobalt); }
::selection { background: var(--cobalt); color: #fff; }

.wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.bar6 { position: sticky; top: 0; z-index: 200; background: rgb(244 245 247 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar6-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.word6 { font-family: var(--font-display); font-weight: 800; margin-right: auto; }
.nav6 { display: flex; gap: 1.5rem; }
.nav6 a { font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.nav6 a:hover { color: var(--cobalt); }
@media (max-width: 640px) { .nav6 { display: none; } }

.intro6 { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.tag6 { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); margin-bottom: .9rem; }
.intro6 h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.15; max-width: 18ch; }
.intro6 h1 span { color: var(--cobalt); }
.lede6 { color: var(--ink-soft); max-width: 54ch; margin-top: 1rem; font-size: 1.02rem; }

/* bento grid */
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(90px, auto); gap: 1rem;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
}
.cell { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; overflow: hidden; position: relative; }
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.c-hero { grid-column: span 4; grid-row: span 4; padding: 0; display: flex; align-items: flex-end; }
.c-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(1.05) brightness(.75); transition: transform .8s ease; }
.c-hero:hover img { transform: scale(1.04); }
.cell-copy { position: relative; z-index: 1; padding: 2rem; color: #fff; }
.cell-copy h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.btn6 { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--ink); font-weight: 700; font-size: .86rem; padding: .7rem 1.2rem; border-radius: 999px; transition: transform .2s ease, background-color .2s ease; }
.btn6:hover { transform: translateY(-2px); background: var(--cobalt-soft); }
.btn6.solid { background: var(--cobalt); color: #fff; align-self: flex-start; }
.btn6.solid:hover { background: #1c46d6; }

.c-stat { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.c-stat.accent { background: var(--cobalt); color: #fff; border-color: transparent; }
.c-stat strong { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-variant-numeric: tabular-nums; }
.c-stat span { font-size: .82rem; opacity: .75; margin-top: .2rem; }

.c-wa { grid-column: span 2; grid-row: span 2; background: #e9fbf1; border-color: #bdeed2; padding: 0; }
.c-wa a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem; height: 100%; padding: 1.5rem; color: #128C7E; font-weight: 700; }
.c-wa svg { width: 26px; height: 26px; color: #25D366; }

.c-sobre { grid-column: span 3; grid-row: span 3; }
.c-sobre p:not(.tag6) { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; margin-top: .5rem; }

.c-areas { grid-column: span 3; grid-row: span 3; }
.tags6 { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.tags6 li { list-style: none; background: var(--cobalt-soft); color: var(--cobalt); font-size: .82rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; transition: background-color .2s ease, transform .2s ease; }
.tags6 li:hover { background: var(--cobalt); color: #fff; transform: translateY(-2px); }

.c-team { grid-column: span 2; grid-row: span 3; text-align: center; }
.c-team img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto .9rem; filter: grayscale(.4); }
.c-team h3 { font-size: 1rem; }
.c-team p { font-size: .8rem; color: var(--ink-soft); margin-top: .4rem; }

.c-map { grid-column: span 3; grid-row: span 3; padding: 0; }
.c-map iframe { width: 100%; height: 100%; border: 0; }

.c-addr { grid-column: span 3; grid-row: span 2; }
.c-addr address { font-style: normal; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; margin: .5rem 0 1rem; }
.c-addr a { font-weight: 700; color: var(--cobalt); font-size: .88rem; }

.c-links { grid-column: span 3; grid-row: span 2; }
.linkgrid6 { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.linkgrid6 a { font-size: .82rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); padding: .5rem .9rem; border-radius: 999px; transition: border-color .2s ease, color .2s ease; }
.linkgrid6 a:hover { border-color: var(--cobalt); color: var(--cobalt); }

.c-form { grid-column: span 6; grid-row: span 4; }
.c-form .contact-form { display: flex; flex-direction: column; gap: 1rem; margin-top: .75rem; max-width: 720px; }
.form-row { display: flex; flex-direction: column; gap: .4rem; }
.two-col6 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .two-col6 { grid-template-columns: 1fr; } }
.form-row label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea { padding: .7rem .85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: .95rem; transition: border-color .2s ease, box-shadow .2s ease; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); outline: none; }
.hp-field { position: absolute; left: -9999px; }
.form-status { font-size: .84rem; min-height: 1.2em; }
.form-status[data-state="ok"] { color: var(--cobalt); }
.form-status[data-state="err"] { color: #c0392b; }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .c-hero, .c-sobre, .c-areas, .c-map, .c-addr, .c-links, .c-form { grid-column: span 2; }
  .c-stat, .c-wa, .c-team { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .c-hero, .c-stat, .c-wa, .c-sobre, .c-areas, .c-team, .c-map, .c-addr, .c-links, .c-form { grid-column: span 1; }
  .c-hero { grid-row: span 3; min-height: 320px; }
}

.foot6 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: 2rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }