/* Demo · Exemplo Contabilistas — dirección 01 Editorial Premium, variante
   «informe / periódico»: tipográfica, papel blanco, filetes, numeración romana.
   Se distingue de la inmobiliaria (editorial de imagen). */
:root {
  --bg: #FBFAF7; --surface: #FFFFFF; --ink: #1B1A17; --muted: #625C53; --line: #DCD6CB;
  --papel: #F3EFE7; --tinta: #23362C; --bronze: #7D6B57;
  --accent: #1B1A17; --accent-ink: #FBFAF7;
  --display: "Cormorant Garamond", Georgia, serif; --body: "Montserrat", system-ui, sans-serif;
  --btn-radius: 0; --btn-case: uppercase; --btn-tracking: .16em; --btn-font: 500 .76rem/1.1 var(--body); --btn-pad: 1.25em 1.8em;
  --campo-radius: 0; --campo-bg: #FBFAF7; --faq-radius: 0; --focus: #23362C; --max: 1180px;
}
body { font-size: 16px; }
.btn--linha { box-shadow: inset 0 0 0 1px currentColor; }

/* Cabecera tipo cabecera de periódico */
.cab { border-bottom: 3px double var(--ink); }
.cab__nav a { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cab__nav a:hover { color: var(--ink); }
.logo { font: 600 1.5rem/1 var(--display); text-decoration: none; letter-spacing: -.01em; }
.logo em { font-style: italic; font-weight: 500; color: var(--tinta); }

.eti { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1.6rem; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; line-height: 1; text-wrap: balance; }
h1 em, h2 em { color: var(--tinta); }
h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
h3 { font: 600 1.3rem/1.15 var(--display); }
.num { font: italic 500 2.6rem/1 var(--display); color: var(--bronze); margin-bottom: .6rem; }
.cabeca { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--ink); }
.sub { margin-top: 1rem; color: var(--muted); max-width: 52ch; }

/* Hero */
.hero { padding: clamp(36px, 5vw, 80px) 0 clamp(48px, 6vw, 80px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); }
.beneficio { margin-top: 1.6rem; font-size: 1.08rem; max-width: 40ch; line-height: 1.65; padding-left: 16px; border-left: 2px solid var(--tinta); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 2rem; }
.link-fino { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 6px; }
.indice { border-top: 1px solid var(--ink); padding-top: 14px; }
.indice__tit { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.indice ol { list-style: none; padding: 0; margin: 0; }
.indice a { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 1.15rem/1.2 var(--display); }
.indice a:hover { color: var(--tinta); }
.indice span { font-style: italic; color: var(--bronze); min-width: 1.6em; }

/* Cinta de servicios, lenta y tipográfica */
.fita { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); overflow: hidden; background: var(--papel); }
.fita__trilho { display: flex; gap: 22px; width: max-content; padding: 12px 0; font: italic 500 1.3rem/1 var(--display); animation: correr 60s linear infinite; }
.fita:hover .fita__trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fita__trilho { animation: none; } }

/* Pestañas empresa / independiente (CSS :has, sin JavaScript) */
.abas { border: 0; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink); min-width: 0; }
.abas label { position: relative; cursor: pointer; }
.abas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.abas span { display: block; padding: 12px 22px 12px 0; margin-right: 22px; font: 500 1.4rem/1.2 var(--display); color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.abas input:checked + span { color: var(--ink); border-bottom-color: var(--tinta); }
.abas input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.painel { display: none; }
.publicos:has(input[value="empresa"]:checked) .painel--empresa,
.publicos:has(input[value="independente"]:checked) .painel--independente { display: block; }
.painel__intro { font: italic 500 1.25rem/1.4 var(--display); color: var(--muted); margin-bottom: 22px; }
.servicos { list-style: none; padding: 0; margin: 0 0 28px; columns: 2; column-gap: 48px; column-rule: 1px solid var(--line); }
.servicos li { break-inside: avoid; padding: 0 0 22px; }
.servicos p { color: var(--muted); font-size: .94rem; margin-top: 6px; }

/* Pasos */
.secao--papel { background: var(--papel); }
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.passos li { padding: 0 24px 0 0; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--line); margin-right: 24px; }
.passos li:last-child { border-right: 0; margin-right: 0; }
.passos span { font: 500 3.2rem/1 var(--display); color: var(--tinta); }
.passos p { color: var(--muted); font-size: .92rem; }

/* Calendario */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th { text-align: left; font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--ink); }
.tabela td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela td:first-child { font: 600 1.15rem/1.2 var(--display); }

/* Honorarios */
.honorarios { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: end; }
.honorarios .num { padding-top: 18px; border-top: 1px solid var(--ink); }
.hon__valor { margin-top: 1.4rem; font: 500 clamp(2rem, 3.6vw, 3rem)/1 var(--display); color: var(--tinta); }
.quem { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; padding: 20px; background: var(--surface); border: 1px solid var(--line); }
.quem__foto { aspect-ratio: 4 / 5; border: 1px dashed var(--muted); display: grid; place-items: center; text-align: center; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.quem p { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* Compromiso */
.compromisso { text-align: center; }
.compromisso .env { max-width: 860px; }
.compromisso__aspas { font: 500 6rem/.6 var(--display); color: var(--bronze); }
.compromisso h2 { font-style: italic; }
.compromisso p:last-child { margin: 1.2rem auto 0; max-width: 46ch; font-size: 1.1rem; color: var(--muted); }

/* Dúvidas */
.duvidas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
.faq-lista details { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.faq-lista details:first-child { border-top: 1px solid var(--ink); }
.faq-lista summary { font: 500 1.3rem/1.25 var(--display); padding-left: 0; }
.faq-lista details p { padding-left: 0; }

/* Proposta */
.secao--tinta { background: var(--tinta); color: #F3EFE7; }
.secao--tinta h2 em { color: #C9D8C9; }
.secao--tinta .num { color: #C9B79F; }
.secao--tinta .sub { color: #C9D2C9; }
.proposta { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.resumo { margin-top: 1.6rem; font: italic 500 1.4rem/1.4 var(--display); }
.resumo b { font-style: normal; color: #FFFFFF; border-bottom: 1px solid #C9B79F; }
.folha { padding: clamp(24px, 3vw, 36px); background: var(--bg); color: var(--ink); }
.folha label { font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.folha .consent { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.perfil { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; min-width: 0; }
.perfil legend { font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0; width: 100%; }
.perfil label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font: 500 1.15rem/1.2 var(--display); color: var(--ink); }
.perfil input { width: 18px; height: 18px; accent-color: var(--tinta); }

.rodape { border-top: 3px double var(--ink); color: var(--muted); }
.rodape .logo { color: var(--ink); margin-bottom: 12px; }

@media (max-width: 1000px) {
  .hero__grid, .honorarios, .duvidas, .proposta { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .passos li:nth-child(2) { border-right: 0; margin-right: 0; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .acoes .btn { width: 100%; }
  .servicos { columns: 1; }
  .passos { grid-template-columns: 1fr; }
  .passos li { border-right: 0; margin-right: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .tabela thead { display: none; }
  .tabela tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tabela td { border: 0; padding: 2px 0; }
  .abas span { font-size: 1.15rem; }
}

/* ==========================================================================
   Nexo Contabilidade · capa premium (2026-10-09): verde bosque, editorial.
   Hueco .hero__foto preparado para la fotografía real (la variable --foto en el HTML).
   ========================================================================== */
:root { --tinta: #1F3A2E; --bosque: #1F3A2E; --accent: #1F3A2E; --accent-ink: #FBFAF7; --focus: #1F3A2E; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__n { display: grid; place-items: center; width: 32px; height: 32px; background: var(--bosque); color: #F3EFE7; font: italic 600 1.2rem/1 var(--display); }
.hero { position: relative; overflow: clip; }
.hero__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; z-index: 0; background-color: var(--papel); background-position: center;
  background-image: var(--foto, none),
    linear-gradient(90deg, rgba(31, 58, 46, .08) 1px, transparent 1px),
    radial-gradient(ellipse 70% 50% at 60% 25%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #EDE7DC 0%, #D9D2C3 60%, #B9BFA8 100%);
  background-size: cover, 28px 100%, auto, auto; }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(251, 250, 247, .2) 40%, rgba(251, 250, 247, 0) 100%); }
.hero__grid { position: relative; z-index: 1; }
.indice { background: rgba(251, 250, 247, .94); padding: 18px 20px 6px; border-top: 3px solid var(--bosque); box-shadow: 0 30px 60px -40px rgba(31, 58, 46, .5); }
.fita { background: var(--bosque); color: #F3EFE7; border-color: var(--bosque); }
.destaque { padding: clamp(56px, 8vw, 104px) 0; background: var(--papel); border-bottom: 1px solid var(--line); }
.destaque__fila { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 56px; align-items: end; }
.destaque__frase { grid-row: span 2; font: 500 clamp(2.4rem, 5.4vw, 4.6rem)/1 var(--display); letter-spacing: -.015em; color: var(--bosque); text-wrap: balance; }
.destaque__apoio { color: var(--muted); max-width: 36ch; }
.destaque .btn { justify-self: start; }
@media (max-width: 1000px) {
  .hero__foto { width: 100%; opacity: .45; }
  .destaque__fila { grid-template-columns: 1fr; }
  .destaque__frase { grid-row: auto; }
}
@media (max-width: 420px) { .logo__n { display: none; } .logo { font-size: 1.25rem; } .cab__fila { gap: 14px; } }
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

/* O escritório (2026-10-09) y responsable sin persona ficticia */
:root { --foto-fundo: linear-gradient(90deg, rgba(31,58,46,.07) 1px, transparent 1px) 0 0 / 28px 100%, radial-gradient(ellipse 70% 50% at 60% 25%, rgba(255,255,255,.9), transparent 70%), linear-gradient(180deg, #EDE7DC, #D9D2C3 60%, #B9BFA8); --foto-r: 0; }
.escritorio__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.escritorio__foto { aspect-ratio: 4 / 5; border-top: 3px solid var(--bosque); }
.escritorio__lista { list-style: none; padding: 0; margin: 32px 0 0; display: grid; border-top: 1px solid var(--ink); }
.escritorio__lista li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.escritorio__lista b { display: block; font: 600 1.3rem/1.2 var(--display); color: var(--bosque); margin-bottom: 4px; }
.quem__foto--mono { display: grid; place-items: center; background: var(--bosque) !important; color: #F3EFE7; font: italic 600 2.4rem/1 var(--display); border: 0 !important; }
@media (max-width: 1000px) { .escritorio__grid { grid-template-columns: minmax(0, 1fr); } .escritorio__foto { aspect-ratio: 16 / 10; order: -1; } }

/* Hero con fotografía real (2026-10-10): foto más ancha, velo ligero y encuadre a la
   lámpara y el escritorio para que el índice quede encima como una hoja. */
@media (min-width: 1001px) {
  .hero__foto { width: 46%; }
  .hero__foto::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(251, 250, 247, 0) 28%); }
  .hero__foto img { object-position: 80% 50%; }
}