/* ==========================================================================
   Content — in-page components for every page's <main>
   Chrome (header/footer/contact band) lives in chrome.css; this file holds
   the shared components first, then page-specific blocks at the end.
   ========================================================================== */

/* ---- Section heading block ---- */
.section-head {
  margin-bottom: var(--space-7);
}

.section-head > * + * {
  margin-top: var(--space-4);
}

/* ---- Prose stack ---- */
.stack > * + * {
  margin-top: var(--space-4);
}

.stack > h2 + * {
  margin-top: var(--space-5);
}

/* ==========================================================================
   Images — one file per photo (assets/img/<photo-id>.webp), cropped live.
   The framed box (figure.marco) carries the aspect-ratio and switches it at
   the breakpoint; the <img> fills it and is cropped with object-fit: cover.
   Horizontal focus is set per photo ID via data-photo on the <img>, so every
   crop of a photo (large slot and its 1:1 thumbnails) shares it.
   Applies to EVERY people photo on the site, not just Nosotros:
   rostros visibles, sin nombres, nadie mira a cámara.
   ========================================================================== */
.marco > img {
  width: 100%;
  height: 100%;
}

.marco img {
  object-fit: cover;
  object-position: 50% 50%;
}

.marco img[data-photo="sesion-creativa-publicidad"]   { object-position: 63% 50%; }
.marco img[data-photo="revision-datos-investigacion"] { object-position: 30% 50%; }
.marco img[data-photo="trabajo-de-campo"]             { object-position: 40% 50%; }
/* Every other photo (no data-photo, or no override): 50% default */

/* ---- Fixed-ratio media boxes ---- */
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* ==========================================================================
   "El marco" — frame device (§2.3)
   Teal L at top-left, navy L at bottom-right, outside the image.
   Arm = 18% of the image's shorter side (container query units on the
   figure itself), measured along the image edge from its corner.
   ========================================================================== */
.marco {
  position: relative;
  container-type: size;           /* needs a definite size: aspect-ratio or explicit height */
  --marco-w: 4px;
  --marco-off: 8px;
  --marco-arm: 0.18;
}

@media (min-width: 48em) {
  .marco {
    --marco-w: 6px;
    --marco-off: 10px;
  }
}

.marco::before,
.marco::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 48px;                    /* fallback without container units */
  height: 48px;
  width: calc(min(100cqw, 100cqh) * var(--marco-arm) + var(--marco-off) + var(--marco-w));
  height: calc(min(100cqw, 100cqh) * var(--marco-arm) + var(--marco-off) + var(--marco-w));
  transition: width var(--dur-marco) var(--ease-out),
              height var(--dur-marco) var(--ease-out);
}

.marco::before {
  top: calc(-1 * (var(--marco-off) + var(--marco-w)));
  left: calc(-1 * (var(--marco-off) + var(--marco-w)));
  border-top: var(--marco-w) solid var(--teal);
  border-left: var(--marco-w) solid var(--teal);
}

.marco::after {
  right: calc(-1 * (var(--marco-off) + var(--marco-w)));
  bottom: calc(-1 * (var(--marco-off) + var(--marco-w)));
  border-right: var(--marco-w) solid var(--navy);
  border-bottom: var(--marco-w) solid var(--navy);
}

/* ---- 6.2 "Marco activo" — brackets grow 18% → 30% on row hover/focus.
   Duration token is 0ms under prefers-reduced-motion (tokens.css). ---- */
.marco-trigger:hover .marco,
.marco-trigger:focus-within .marco {
  --marco-arm: 0.30;
}

/* ==========================================================================
   Media split — framed image beside text, both on the content grid (§3.3.3)
   ≥ 960px: image cols 1–6 at 3:2 with the full frame, text cols 7–12.
   < 960px: text first, framed image below at 4:3.
   ========================================================================== */
.media-split {
  display: grid;
  gap: var(--space-7) var(--col-gap);
}

.media-split__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 60em) {
  .media-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .media-split__text,
  .media-split__media {
    grid-row: 1;
  }

  .media-split__media {
    aspect-ratio: 3 / 2;
  }

  .media-split--image-left .media-split__media { grid-column: 1 / span 6; }
  .media-split--image-left .media-split__text  { grid-column: 7 / span 6; }

  /* Image right: text cols 1–6, framed image cols 7–12 (service "Lo que recibe") */
  .media-split--image-right .media-split__text  { grid-column: 1 / span 6; padding-right: var(--space-5); }
  .media-split--image-right .media-split__media { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Service rows — full-width, rule-separated; no cards (§3.3.2)
   ========================================================================== */
.service-list {
  border-bottom: 1px solid var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  grid-template-areas:
    "title thumb"
    "desc  desc"
    "deliv deliv";
  gap: var(--space-5) var(--col-gap);
  padding-block: var(--space-7);
  border-top: 1px solid var(--rule);
}

.service-row__title {
  grid-area: title;
  align-self: center;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--fw-heading);
  font-stretch: var(--stretch-heading);
  line-height: var(--lh-h2);
}

.service-row__desc {
  grid-area: desc;
}

.service-row__deliverables {
  grid-area: deliv;
}

.service-row__thumb {
  grid-area: thumb;
  width: 100%;
}

.label {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: var(--lh-small);
}

.plain-list {
  margin-top: var(--space-2);
  padding-left: 1.2em;
}

.plain-list li::marker {
  color: var(--teal);
}

.plain-list li + li {
  margin-top: var(--space-1);
}

.service-row__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
}

@media (min-width: 48em) {
  .service-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px;
    grid-template-areas:
      "title title thumb"
      "desc  deliv thumb";
  }

  .service-row__thumb {
    align-self: start;
  }
}

@media (min-width: 60em) {
  .service-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    align-items: start;
  }

  .service-row__title    { grid-area: auto; grid-column: 1 / span 3; align-self: start; }
  .service-row__desc     { grid-area: auto; grid-column: 4 / span 4; }
  .service-row__deliverables { grid-area: auto; grid-column: 8 / span 3; }
  .service-row__thumb    { grid-area: auto; grid-column: 11 / span 2; justify-self: end; max-width: 160px; }
}

/* ==========================================================================
   Definition rows — two columns, rule-separated (§3.3.4)
   ========================================================================== */
.def-rows {
  border-bottom: 1px solid var(--rule);
}

.def-rows__item {
  display: grid;
  gap: var(--space-3) var(--col-gap);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
}

.def-rows dt {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  text-wrap: balance;
}

.def-rows dd {
  max-width: var(--measure);
}

@media (min-width: 48em) {
  .def-rows__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .def-rows dt { grid-column: 1 / span 6; }
  .def-rows dd { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Two-part row — heading left, text right (short teaser sections)
   ========================================================================== */
.split-head {
  display: grid;
  gap: var(--space-5) var(--col-gap);
}

@media (min-width: 48em) {
  .split-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .split-head > :first-child { grid-column: 1 / span 5; }
  .split-head > :last-child  { grid-column: 7 / span 6; }
}

/* Standalone underlined link with a full tap target */
.link-standalone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
}

/* ==========================================================================
   Inicio — hero (§3.3.1)
   Same structure as the service page headers (.media-split--head): text
   cols 1–7, framed image cols 8–12; < 960px text first, framed 4:3 below.
   Only difference: the hero image is 4:5 on desktop instead of 3:2.
   ========================================================================== */
.hero {
  padding-block: var(--space-8) var(--section-pad);
}

.hero .lede {
  margin-top: var(--space-5);
}

@media (min-width: 60em) {
  .hero .media-split__media {
    aspect-ratio: 4 / 5;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

@media (max-width: 47.99em) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Page header — inner pages (§3.4.1, §3.5.1, §3.6)
   Service pages: label + H1 + lede in cols 1–7, framed 3:2 image in cols
   8–12, on the grid.
   < 960px: text first, framed image below at 4:3.
   ========================================================================== */
.page-head {
  padding-block: var(--space-8) var(--section-pad);
}

/* Text-only header (Nosotros): the next section's padding supplies the gap */
.page-head--text {
  padding-bottom: 0;
}

.page-head .lede {
  margin-top: var(--space-5);
}

/* "Servicios · …" — plain text, not a link trail, no chevrons (§3.4.1) */
.page-label {
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-soft);
}

@media (min-width: 60em) {
  .media-split--head .media-split__text  { grid-column: 1 / span 7; padding-right: var(--space-5); }
  .media-split--head .media-split__media { grid-column: 8 / span 5; }
}

/* ==========================================================================
   "Preguntas que resolvemos" — typographic question list (§3.4.2)
   Archivo 600 at H3 size, stacked; replaces a feature grid.
   ========================================================================== */
.question-list > li {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-strong);
  line-height: var(--lh-h3);
  text-wrap: balance;
  hyphens: manual;
}

.question-list > li + li {
  margin-top: var(--space-6);
}

/* ==========================================================================
   Prose grid — two columns of short H3 + prose blocks, no boxes/numbers
   (§3.4.3 "Cómo lo hacemos", §3.5.3 "Cómo trabajamos" 2×2)
   ========================================================================== */
.prose-grid {
  display: grid;
  gap: var(--space-7) var(--space-8);
}

.prose-grid > * {
  max-width: var(--measure);
}

@media (min-width: 60em) {
  .prose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Service-specific extra paragraph after the method stages
   (Encuestas: confidencialidad y ética · Publicidad: trabajamos con usted) */
.method-extra {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

/* Closing line under a prose grid (Nosotros) */
.closing-line {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   "Lo que recibe" — deliverables list (§3.4.4), rule-separated
   ========================================================================== */
.deliverables {
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--rule);
}

.deliverables > li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
}

.deliverables__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
}

/* ==========================================================================
   "Se complementa con" — two links between rules, each with a small framed
   thumbnail that runs 6.2 "Marco activo" on hover/focus (§3.4.5)
   ========================================================================== */
.complement-list {
  display: grid;
  border-block: 1px solid var(--rule);
}

.complement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: var(--space-4) var(--col-gap);
  align-items: start;
  padding-block: var(--space-6);
}

.complement + .complement {
  border-top: 1px solid var(--rule);
}

.complement__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
}

.complement__text p {
  margin-top: var(--space-2);
}

.complement__thumb {
  width: 100%;
}

@media (min-width: 48em) {
  .complement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .complement + .complement {
    border-top: 0;
  }

  .complement {
    grid-template-columns: minmax(0, 1fr) 112px;
  }
}

/* ==========================================================================
   Wide media — prose on top (cols 1–7), a wide framed image below, offset
   to cols 4–12 (Nosotros "Quiénes somos", §3.5.2). < 960px: 4:3.
   ========================================================================== */
.wide-media {
  display: grid;
  gap: var(--space-7) var(--col-gap);
}

.wide-media__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 60em) {
  .wide-media {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .wide-media__text  { grid-column: 1 / span 7; }
  .wide-media__media { grid-column: 4 / span 9; aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Contacto (§3.6) — intro cols 1–6, contact panel (Formspree form) cols 8–12
   ========================================================================== */
.contact-layout {
  display: grid;
  gap: var(--space-7) var(--col-gap);
}

@media (min-width: 60em) {
  .contact-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .contact-layout__intro { grid-column: 1 / span 6; }
  .contact-panel         { grid-column: 8 / span 5; }
}

/* Teal-tint panel, 4px radius, no shadow */
.contact-panel {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius);
  background: var(--tint-teal);
}

@media (min-width: 48em) {
  .contact-panel {
    padding: var(--space-7) var(--space-6);
  }
}

/* ---- Contact form — labels above fields, no phone field (§3.6) ---- */
.contact-form {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* JS-only: the form ships [hidden] and contact-form.js reveals it.
   This rule is needed because display: grid above beats the UA [hidden] style. */
.contact-form[hidden] {
  display: none;
}

.form-noscript a {
  overflow-wrap: anywhere;
}

.field {
  display: grid;
  gap: var(--space-2);
  width: 100%;
}

.field label {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
}

.field__optional {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--color-text-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--button-min-h);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--navy-muted); /* 5.83:1 on the tint — clears 3:1 for UI */
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font: inherit;
}

.field textarea {
  min-height: 10rem;
  resize: vertical;
}

/* No red in the locked palette: invalid = navy border + inset line + message */
.field [aria-invalid="true"] {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.field__error {
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  line-height: var(--lh-small);
}

/* Consent checkbox: box and label on one row, error below */
.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
}

.field--check input {
  width: 1.5rem;
  min-height: 0;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  accent-color: var(--navy);
}

.field--check label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.3em;
  min-height: var(--tap-min);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.field--check .field__error {
  grid-column: 1 / -1;
}

/* Honeypot — off-screen, not display:none, so bots still find and fill it */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* Inline success/error — aria-live="polite"; stays in the DOM when empty */
.form-status {
  width: 100%;
  max-width: none;
}

.form-status:not(:empty) {
  padding: var(--space-4);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  background: var(--white);
}

/* ==========================================================================
   Aviso de privacidad (§3.7) — long-form, 58ch, anchor-list contents
   ========================================================================== */
.legal {
  padding-block: var(--space-8) var(--section-pad);
}

.legal__updated {
  margin-top: var(--space-4);
}

.legal-toc {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding-block: var(--space-4);
  border-block: 1px solid var(--rule);
}

.legal-toc__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.legal__section {
  max-width: var(--measure);
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-5);
}

/* ==========================================================================
   404 (§3.8) — the one centered text block on the site (§8)
   ========================================================================== */
.not-found {
  padding-block: var(--space-10);
  text-align: center;
}

.not-found p {
  margin: var(--space-5) auto 0;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-6);
  margin-top: var(--space-6);
}