// El estudio — verbatim founding statement, left-shifted asymmetric layout.
// Cols 2–8 carry the body; cols 9–12 are deliberate breathing space with a
// single hairline divider. Pull quote on the right is one phrase lifted
// verbatim from the body.
function Estudio() {
  return (
    <section
      id="estudio"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "var(--section-gap) var(--container-pad)",
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: "clamp(1rem, 3vw, 2.5rem)",
        }}
      >
        {/* Section header occupies cols 2–8 */}
        <div style={{ gridColumn: "2 / span 7" }}>
          <SectionHeader number="01" eyebrow="Estudio" title="Una convicción simple." />
        </div>

        {/* Body — cols 2–8 */}
        <div style={{ gridColumn: "2 / span 7", marginTop: "clamp(2.5rem, 5vw, 4rem)" }}>
          <p
            style={{
              margin: 0,
              fontFamily: "var(--font-ui)",
              fontSize: "clamp(1.0625rem, 1.4vw, 1.1875rem)",
              lineHeight: 1.7,
              color: "var(--ink)",
              maxWidth: "62ch",
            }}
          >
            Nuestro estudio nace de una convicción simple: el ejercicio del
            derecho puede ser cercano y humano sin renunciar a la eficiencia
            ni al rigor técnico. Ofrecemos una atención personalizada, en la
            que cada cliente es escuchado y acompañado a lo largo de todo su
            proceso, respaldada por experiencia en litigación civil, comercial,
            laboral, penal, de familia y de consumidor, y por una mirada
            estratégica e interdisciplinaria de cada caso. Integramos
            herramientas tecnológicas para optimizar tiempos y procesos, de
            modo que podamos concentrar nuestro trabajo en lo que realmente
            importa: el análisis jurídico, la estrategia y la relación con
            quienes nos confían sus asuntos.
          </p>
        </div>

        {/* Cols 9–12: breathing space with a single hairline + pull quote */}
        <aside
          style={{
            gridColumn: "10 / span 3",
            marginTop: "clamp(2.5rem, 5vw, 4rem)",
            alignSelf: "end",
          }}
        >
          <div style={{ width: "100%", height: 1, background: "var(--line)", marginBottom: 24 }} />
          <blockquote
            style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 400,
              fontSize: "clamp(1.0625rem, 1.4vw, 1.25rem)",
              lineHeight: 1.4,
              letterSpacing: "-0.005em",
              color: "var(--ink-muted)",
            }}
          >
            «el análisis jurídico, la estrategia y la relación con quienes nos
            confían sus asuntos.»
          </blockquote>
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { Estudio });