/* ============================================================
   sections.css — hero, fábrica, servicios, casos, faq, contacto
   ============================================================ */

/* —— HERO —— */
.hero { display: grid; grid-template-columns: minmax(340px, 470px) 1fr; grid-template-rows: 1fr auto; min-height: calc(100dvh - var(--nav-h)); border-bottom: 1px solid var(--line); }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
}

.hero__copy { padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; display: flex; flex-direction: column; z-index: 2; }
.hero__copy h1 { font-size: clamp(2.05rem, 1.5rem + 1.85vw, 2.78rem); max-width: 9.6em; text-wrap: balance; }
.hero__rule { width: 6.5rem; height: 1px; background: var(--green); margin: 1.35rem 0 .8rem; }
.hero__sub { color: var(--ink-80); font-size: var(--step-0); }
.hero__cta { margin-top: auto; padding-top: 1.9rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.hero__cta .btn { padding: .95rem 1.6rem; font-size: 1.02rem; }

/* foto (evidencia) — la única capa oscura/foto del mundo */
.hero__photo { position: relative; background: var(--paper-deep); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__legend { position: absolute; left: 2rem; bottom: 2rem; width: min(340px, 78%); padding: 1.1rem 1.25rem .95rem; transform: rotate(-.8deg); }
.hero__legend h3 { font-size: var(--step-1); margin-top: .5rem; }
.hero__legend p { font-size: .88rem; color: var(--ink-80); margin-top: .35rem; }
.hero__legend .legend-t { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.06; letter-spacing: -.02em; margin-top: .5rem; }
.hero__chips { position: absolute; top: 1.6rem; right: 1.4rem; z-index: 2; }

/* momento autoregistrado: la ficha se enclava en la foto */
@keyframes settle {
  from { opacity: 0; transform: translateY(-16px) rotate(-2.6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-.8deg); }
}
.js .hero__legend { animation: settle 0.9s var(--ease-out) .45s both; }
@media (prefers-reduced-motion: reduce) { .js .hero__legend { animation: none; } }

@media (max-width: 980px) {
  .hero__copy { padding-right: 0; padding-bottom: var(--sp-3); }
  .hero__photo { min-height: 66dvh; }
  .hero__legend { left: 1rem; bottom: 1rem; }
  .hero__chips { top: auto; bottom: 8rem; flex-direction: row; overflow-x: auto; padding-inline: 1.4rem; scrollbar-width: none; }
  .hero__chips::-webkit-scrollbar { display: none; }
  .hero__chips { right: 0; left: 0; flex-direction: row; align-items: flex-start; }
  .hero__chips .chip { flex: none; }
}

/* pie de hero: enlace a la siguiente sección */
.hero__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; border-top: 1px solid var(--line); background: var(--paper); }
.hero__foot .next { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.hero__foot .next .arr { transition: transform .2s var(--ease-out); }
.hero__foot .next:hover .arr { transform: translateY(3px); }

/* —— LA FÁBRICA (proceso) —— */
.process { padding-top: 4.25rem; padding-bottom: 4.25rem; }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.step { position: relative; padding-top: 1.2rem; border-top: 1px solid var(--line-strong); }
.step--lift { margin-top: 2.2rem; }
.step--drop { margin-top: -.4rem; }
.step .tag { color: var(--green-ink); }
.step h3 { font-size: var(--step-1); margin: .55rem 0 .5rem; }
.step p { color: var(--ink-80); font-size: .92rem; }
@media (max-width: 980px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .step--lift, .step--drop { margin-top: 0; }
}
@media (max-width: 560px) { .process__grid { grid-template-columns: 1fr; } }

/* —— SERVICIOS (filas editoriales) —— */
.services { padding-top: 4.25rem; padding-bottom: 0; border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 1fr; padding: 1.9rem 0; border-bottom: 1px solid var(--line); align-items: start; gap: 1rem; }
.svc__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.svc__num { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; color: var(--ink-65); }
.svc h3 { font-size: var(--step-2); letter-spacing: -.022em; }
.svc p { color: var(--ink-80); margin-top: .55rem; max-width: 58ch; }
.svc__links { margin-top: .8rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.svc--lead { padding-block: var(--sp-4); }
.svc--lead h3 { font-size: var(--step-3); }
@media (min-width: 980px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc--lead { grid-template-columns: 1.2fr 1fr; }
}
/* hover físico de fila */
.svc { transition: background .2s var(--ease-out); }
.svc:hover { background: rgba(252, 251, 245, .8); }

/* —— EL OFICIO (historia) —— */
.oficio { background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 4.25rem; padding-bottom: 4.25rem; padding-left: 1.35rem; padding-right: 1.35rem; }
.oficio__grid { display: grid; gap: var(--sp-4); align-items: end; }
.oficio p { font-size: var(--step-1); font-family: var(--font-display); font-weight: 500; line-height: 1.32; letter-spacing: -.015em; max-width: 30ch; }
.oficio p b { font-weight: 800; }
.oficio .aside { max-width: 40ch; }
@media (min-width: 900px) { .oficio__grid { grid-template-columns: 1.1fr 1fr; gap: var(--sp-5) } }

/* —— FAQ teaser —— */
.faq { padding-top: 4.25rem; padding-bottom: 4.25rem; border-top: 1px solid var(--line); }
.faq__more { margin-top: 1.4rem; display: inline-block; }

/* —— CONTACTO —— */
.contact { background: var(--card); border-top: 1px solid var(--line); padding-top: 4.25rem; padding-bottom: 4.25rem; padding-left: 1.35rem; padding-right: 1.35rem; }
.contact__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: .9fr 1.1fr; gap: var(--sp-5); } }
.contact h2 { font-size: var(--step-3); }
.contact .lead-p { color: var(--ink-80); margin-top: .8rem; }
.contact ul { list-style: none; margin-top: 1.5rem; display: grid; gap: .5rem; }
.contact ul .mono { display: inline; }
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form .form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* —— FOOTER —— */
.foot { background: var(--ink); color: var(--paper); padding-block: var(--sp-4) var(--sp-2); }
.foot__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; } }
.foot .brand__dot { background: var(--green); }
.foot .brand__name { color: var(--paper); }
.foot p { color: rgba(242, 241, 236, .72); font-size: .92rem; }
.foot nav { display: grid; gap: .45rem; }
.foot nav a { color: rgba(242, 241, 236, .9); text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: .18em; }
.foot .tlink { color: rgba(242, 241, 236, .92); }
.foot .tlink:hover { color: var(--paper); }
.foot .mono { color: rgba(242, 241, 236, .78); }
.foot-blurb { margin-top: .8rem; max-width: 34ch; }
.foot-mail { margin-top: .6rem; }
.foot-phone { margin-top: .35rem; }

/* encabezados de sección con texto guía */
.section-head .lead { margin-top: 1.3rem; color: var(--ink-80); }

/* aside de "El oficio": párrafo en tamaño de cuerpo */
.oficio .aside p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: normal;
  max-width: 42ch;
}
.oficio .aside p b { font-weight: 700; }
.aside-cta { display: inline-block; margin-top: 1rem; }
.foot__meta { margin-top: var(--sp-4); padding-top: 1rem; border-top: 1px solid rgba(242, 241, 236, .16); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }