/* =========================================================
   Goosling — About (iPos: /pantallac/about/272)
   Réplica de los estilos de la página About de Lovable.

   - Todo va con scope al bloque del About: no toca header,
     footer, drawers ni otras páginas.
   - Funciona con el HTML actual (que trae `classname=` en vez
     de `class=`, por eso Tailwind no aplica) y también si
     después le pones la clase .goosling-about al div raíz.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Sacramento&display=swap");

/* ---------- 1. Neutralizar el contenedor genérico de iPos ----------
   La sección de texto de iPos mete padding 60px, .wrap a 800px
   centrado y .prose a 18px / 1.7 con estilos inline, por eso
   los !important. */
.text-section:has(.goosling-about, [classname~="min-h-screen"]) {
  padding: 0 !important;
}

.text-section:has(.goosling-about, [classname~="min-h-screen"]) > .wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.text-section:has(.goosling-about, [classname~="min-h-screen"]) .prose {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* ---------- 2. Raíz del About: variables y base ---------- */
:is(.goosling-about, [classname~="min-h-screen"]) {
  --ga-cream: oklch(92.49% .0716 99.85);
  --ga-sky: oklch(77.6864% .115917 253.824);
  --ga-ink: oklch(52% .105 253.5);
  --ga-font-display: "EB Garamond", Georgia, serif;
  --ga-font-body: "Lora", Georgia, serif;

  color: var(--ga-sky);
  font-family: var(--ga-font-body);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

:is(.goosling-about, [classname~="min-h-screen"]) *,
:is(.goosling-about, [classname~="min-h-screen"]) *::before,
:is(.goosling-about, [classname~="min-h-screen"]) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:is(.goosling-about, [classname~="min-h-screen"]) ::selection {
  background: var(--ga-sky);
  color: var(--ga-ink);
}

:is(.goosling-about, [classname~="min-h-screen"]) :is(h1, h2) {
  font-family: var(--ga-font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ga-sky);
  text-transform: lowercase;
}

/* ---------- 3. Hero (logo + "about us") ---------- */
:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(1) {
  background-color: var(--ga-cream);
  padding: 3rem 1.25rem;            /* py-12 px-5 */
  text-align: center;
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(1) > div {
  max-width: 48rem;                 /* max-w-3xl */
  margin-inline: auto;
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(1) img {
  display: block;
  height: 6rem;                     /* h-24 */
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

:is(.goosling-about, [classname~="min-h-screen"]) h1 {
  margin-top: 1rem;                 /* mt-4 */
  font-size: 2.25rem;               /* text-4xl */
  line-height: 2.5rem;
}

/* ---------- 4. Texto (párrafos) ---------- */
:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(2),
:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(3) {
  max-width: 48rem;                 /* max-w-3xl */
  margin-inline: auto;
  padding: 2.5rem 1.25rem;          /* py-10 px-5 */
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(2) {
  color: color-mix(in oklab, var(--ga-sky) 90%, transparent);   /* text-foreground/90 */
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(2) > p {
  color: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(2) > p:not(:last-child) {
  margin-bottom: 1.5rem;            /* space-y-6 */
}

/* ---------- 5. Location ---------- */
.prose :is(.goosling-about, [classname~="min-h-screen"]) h2,
:is(.goosling-about, [classname~="min-h-screen"]) h2 {
  margin: 0;                        /* anula el margin 44px/14px de .prose h2 */
  font-size: 1.5rem;                /* text-2xl */
  line-height: 2rem;
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(3) > div {
  margin-top: 1rem;                 /* mt-4 */
  color: color-mix(in oklab, var(--ga-sky) 90%, transparent);
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(3) > div > * {
  color: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(3) > div > :not(:last-child) {
  margin-bottom: 1rem;              /* space-y-4 */
}

:is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(3) p:first-child {
  font-weight: 500;                 /* font-medium */
}

:is(.goosling-about, [classname~="min-h-screen"]) address {
  font-style: normal;               /* not-italic */
}

/* ---------- 6. Breakpoint sm (≥ 640px) ---------- */
@media (min-width: 40rem) {
  :is(.goosling-about, [classname~="min-h-screen"]) > section:nth-of-type(1) {
    padding-block: 4rem;            /* sm:py-16 */
  }

  :is(.goosling-about, [classname~="min-h-screen"]) h1 {
    font-size: 3.75rem;             /* sm:text-6xl */
    line-height: 1;
  }

  :is(.goosling-about, [classname~="min-h-screen"]) h2 {
    font-size: 1.875rem;            /* sm:text-3xl */
    line-height: 2.25rem;
  }
}