/* A coherent story panel, with three small chapters and a botanical portrait. */
#nosotros .about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.about-portrait { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; background: #eeeadd; }
.about-photo { position: relative; block-size: clamp(180px, 35svh, 330px); }
.about-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 55%; }
.about-photo-label { position: absolute; inset: auto .9rem .9rem; padding: .5rem .7rem; background: rgba(15,47,36,.88); color: var(--paper); font-size: .65rem; letter-spacing: .04em; border-radius: 8px; }
.about-caption { padding: 1.15rem 1.25rem; border-top: 1px solid var(--line); }
.about-caption > span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.about-caption p { font-size: 1.05rem; line-height: 1.4; font-weight: 550; margin: .5rem 0 0; color: var(--forest); }
.about-copy h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; margin: .85rem 0 1rem; }
.about-intro { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.15rem; max-inline-size: 48ch; }
.about-switch { display: flex; gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: #eeeddf; }
.about-switch button { flex: 1; min-block-size: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 .8rem system-ui, sans-serif; cursor: pointer; transition: color 180ms, background 180ms, box-shadow 180ms; }
.about-switch button[aria-pressed="true"] { background: var(--paper); color: var(--forest); box-shadow: 0 2px 6px rgba(15,47,36,.08); }
.about-switch button:hover { color: var(--forest); }
.about-stories { display: grid; margin: 1rem 0; }
.about-stories > div { grid-area: 1 / 1; min-inline-size: 0; }
.about-stories > [aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.about-stories h3 { font: 650 1rem/1.4 system-ui, sans-serif; color: var(--forest); margin: 0 0 .6rem; }
.about-stories p { font-size: .85rem; line-height: 1.6; margin: 0; }
.about-stories dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; margin: .8rem 0 0; }
.about-stories dt { font-size: .65rem; color: var(--muted); margin-bottom: .3rem; }
.about-stories dd { font-size: .78rem; line-height: 1.4; font-weight: 500; margin: 0; }
.about-concept-note { font-size: .75rem; color: var(--muted); }
@media (max-width: 1100px) {
  #nosotros .about-layout { grid-template-columns: .75fr 1.25fr; gap: 1.5rem; }
  .about-photo-label { font-size: .6rem; }
}
@media (max-width: 699px) {
  #nosotros .about-layout { grid-template-columns: minmax(0, 1fr); }
  .about-portrait { display: none; }
  .about-copy h2 { font-size: 1.9rem; margin-block: .6rem; }
  .about-intro { font-size: .85rem; margin-bottom: .85rem; }
  .about-stories { margin-block: .85rem; }
  .about-stories dl { gap: .6rem; }
}
@media (max-height: 650px) {
  .about-copy h2 { font-size: 1.65rem; margin-block: .5rem; }
  .about-intro { display: none; }
  .about-stories { margin-block: .6rem; }
  .about-stories p { font-size: .8rem; line-height: 1.45; }
  .about-stories dl { padding-top: .5rem; margin-top: .5rem; }
  .about-caption { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .about-switch button { transition: none; } }
@media (max-height: 500px) {
  .about-copy h2 { font-size: 1.35rem; }
  .about-stories dl { display: none; }
  .about-stories h3 { font-size: .9rem; margin-bottom: .3rem; }
  .about-stories { margin-block: .5rem; }
  .about-switch button { min-block-size: 40px; }
  .about-photo { block-size: 140px; }
}