/* One content frame and spacing scale for the landing and service pages. */
:root {
  --content-max: 1200px;
  --page-gutter: clamp(32px, 4.5vw, 64px);
  --section-space: clamp(76px, 6vw, 104px);
  --layout-gap: clamp(40px, 4.5vw, 64px);
}

.wrap {
  width: min(var(--content-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  min-width: 0;
}

.service-visual img[src*="fondo-forecast-prevision"] {
  object-position: right center;
}

.site-header,
.service-header {
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2));
}

/* Body and secondary navigation are stacked, never competing flex siblings. */
.chapter {
  display: block;
  min-height: 0;
  padding-block: var(--section-space);
}

.intro,
.forecast,
.method {
  padding-block: var(--section-space);
}

.chapter-layout,
.market-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--layout-gap);
}

.chapter-layout > *,
.service-hero-grid > *,
.service-explanation > *,
.audience-story-grid > *,
.service-transformation > * {
  min-width: 0;
}

.chapter-copy > p:not(.eyebrow) { max-width: 30em; }
.chapter-copy .text-link { line-height: 1.45; }
.chapter-capture .chapter-layout { align-items: start; }
.chapter-capture .capture-visual { min-height: 0; padding-top: 180px; }
.capture-visual,
.data-transformation,
.offer-story { width: 100%; margin-inline: 0; }

.context-links {
  margin-top: 42px;
  padding-top: 24px;
  justify-content: flex-start;
  align-items: center;
  gap: 16px 32px;
}
.context-links a { min-height: 36px; line-height: 1.5; }
.context-links a span { flex-shrink: 0; }

.chapter-data > .photo-shade,
.chapter-capture > .photo-shade {
  background:
    linear-gradient(0deg, #071120b8 0%, transparent 35%),
    linear-gradient(90deg, #071120f5 0%, #071120e8 38%, #07112070 73%, #07112038 100%);
}

.intro-head { gap: 0 var(--layout-gap); }
.operation-head { gap: var(--layout-gap); }
.operation-head > p { max-width: 360px; }
.operation-demo { padding: clamp(22px, 2.8vw, 34px); }
.audience-story-grid { gap: 24px; }
.audience-story-answer { padding: 26px; }
.audience-story-scene { padding: 26px; }
.questions { gap: var(--layout-gap); }
.contact { padding-block: var(--section-space); }

.service-header { padding-block: 22px; }
.service-hero { padding-block: 40px 72px; }
.service-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--layout-gap); }
.service-hero h1 { font-size: clamp(40px, 4.2vw, 64px); }
.service-breadcrumb { line-height: 1.5; }
.service-lead { max-width: 32em; }
.service-visual { margin-top: 24px; }
.service-visual img { height: 360px; }
.service-visual figcaption { padding: 24px; }
.service-transformation article { padding: 30px; }
.service-transformation h2 { font-size: 24px; line-height: 1.25; }
.service-explanation { gap: var(--layout-gap); }
.service-explanation h2 { font-size: 32px; }
.service-detail > div { max-width: 680px; }
.service-flow { margin-block: 56px; }
.service-contact,
.service-directory { padding-block: 72px; }
.service-visual img[src*="consultas"],
.audience-story-scene img[src*="consultas"],
.visual-service-card img[src*="consultas"] { object-position: 78% center; }

@media (max-width: 1100px) {
  .leak-stat { flex-wrap: wrap; gap: 12px 22px; }
  .leak-stat > p { flex: 1 1 170px; }
  .service-transformation article { padding: 24px; }
  .service-transformation h2 { font-size: 22px; }
}

@media (max-width: 900px) {
  .chapter-capture .capture-visual { padding-top: 140px; }
  :root { --section-space: 76px; --layout-gap: 42px; }
  .chapter-layout,
  .market-layout,
  .service-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .chapter-copy { max-width: 660px; }
  .capture-visual,
  .data-transformation,
  .offer-story { max-width: 660px; justify-self: center; }
  .chapter-data > .photo-shade,
  .chapter-capture > .photo-shade {
    background: linear-gradient(180deg, #071120fa 0%, #071120ed 38%, #07112055 65%, #071120d9 100%);
  }
  .operation-head { display: block; }
  .operation-head > p { max-width: 620px; }
  .service-hero { padding-block: 32px 56px; }
  .service-hero h1 { max-width: 720px; font-size: clamp(40px, 6vw, 56px); }
  .service-visual { margin-top: 0; }
  .service-visual img { height: 320px; }
  .service-explanation { grid-template-columns: 1fr; gap: 24px; }
  .service-explanation h2 { max-width: 640px; }
}

@media (max-width: 620px) {
  :root { --page-gutter: 24px; --section-space: 64px; --layout-gap: 36px; }
  .hero-layout { padding-top: 52px; padding-bottom: 40px; }
  .chapter-copy h2 { font-size: clamp(34px, 9.6vw, 44px); }
  .audience-story-grid { gap: 20px; }
  .audience-story-scene,
  .audience-story-answer { padding: 22px; }
  .audience-story-scene h3 { font-size: 26px; }
  .context-links { margin-top: 30px; padding-top: 20px; gap: 12px; }
  .context-links a { min-height: 44px; width: 100%; justify-content: space-between; }
  .operation-demo { padding: 20px 12px; }
  .questions { gap: 24px; }
  .forecast-scene-copy h3 { overflow-wrap: normal; }
  .service-header { padding-block: 20px; gap: 18px; }
  .service-header nav { flex-wrap: wrap; gap: 16px 22px; }
  .service-hero { padding-block: 26px 44px; }
  .service-hero-grid { gap: 30px; }
  .service-hero h1 { font-size: clamp(34px, 9.3vw, 44px); }
  .service-breadcrumb { gap: 8px; margin-bottom: 26px; }
  .service-breadcrumb > span:last-child { min-width: 0; }
  .service-lead { font-size: 17px; }
  .service-visual img { height: 220px; }
  .service-visual figcaption { padding: 20px; }
  .service-transformation article { padding: 24px; }
  .service-transformation h2 { font-size: 23px; }
  .service-flow { padding: 24px; margin-block: 36px; }
  .service-explanation h2 { font-size: 28px; }
  .service-contact,
  .service-directory { padding-block: 56px; }
}

@media (max-width: 360px) {
  :root { --page-gutter: 20px; }
  .audience-switch { grid-template-columns: 1fr; }
  .audience-switch button { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 86px; padding: 16px; }
  .audience-switch button > span { margin: 0; min-height: 0; }
  .audience-switch strong { font-size: 18px; }
  .leak-case { padding: 22px 18px; }
  .audience-story-scene,
  .audience-story-answer { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
  .service-card:hover { transform: none; }
}

/* Visible invitations, tactile controls and clear selected states. */
.interaction-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.interaction-hint > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--navy);
  background: var(--gold);
  font-size: 19px;
}
.audience-hint { margin-top: 34px; }
.audience-switch { margin-top: 14px; }
.interaction-control { min-width: 0; flex-shrink: 0; }
.operation-controls .interaction-control { width: 360px; max-width: 100%; }
.operation-controls .interaction-hint { margin: 0 0 12px; font-size: 13px; }
.segmented {
  gap: 8px;
  padding: 6px;
  border: 1px solid #c6aa68;
  border-radius: 8px;
  background: #ede3cb;
}
.segmented button,
.operation-controls .segmented button,
.forecast-heading .segmented button {
  position: relative;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid #ab8b46;
  border-radius: 4px;
  color: var(--navy);
  background: #fffdf7;
  box-shadow: 0 3px 0 #ab8b4650;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.segmented button[aria-pressed="true"] {
  color: var(--ivory);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.interaction-control .segmented { display: flex; margin-top: 0; }
.interaction-control .segmented button { flex: 1; }
.audience-switch button {
  border: 2px solid #b99b58;
  background: #fffdf7;
  padding-right: 25px;
  box-shadow: 0 4px 0 #b99b5835;
}
.audience-switch button > b { display: none; }
.audience-switch button::after {
  content: 'Ver propuesta ↓';
  display: block;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gold-ink);
}
.audience-switch button[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 -4px 0 var(--gold); }
.audience-switch button[aria-pressed="true"]::after { content: 'Seleccionado ✓'; color: var(--gold); }
.button { min-height: 52px; box-shadow: 0 4px 0 #00000022; }
.text-link > span,
.context-links a > span,
.needs-nav a > span:last-child,
.audience-entry b,
.service-card-action > span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 19px;
}
.text-link { min-height: 44px; }
.questions-heading h2,
.questions-heading h3 { font-size: 34px; line-height: 1.2; }
.disclosure-hint { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 28em; }
.faq-items summary,
.service-detail > summary { align-items: center; padding-inline: 16px; }
.faq-items summary > span,
.service-detail > summary > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
  background: #ede3cb;
  color: var(--navy);
  font: 400 24px/1 Arial, sans-serif;
}
.faq-items details[open] > summary,
.service-detail[open] > summary { background: #eee6d5; }
.faq-items details > p { padding: 12px 16px 24px; }
.service-detail > div { padding: 20px 16px 28px; }
.segmented button:focus-visible,
.audience-switch button:focus-visible,
summary:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 4px; }
@media (hover: hover) {
  .segmented button[aria-pressed="false"]:hover { background: #f3e1ac; transform: translateY(-2px); box-shadow: 0 5px 0 #ab8b4650; }
  .audience-switch button[aria-pressed="false"]:hover { background: #f4e9ca; transform: translateY(-2px); }
  .button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #00000022; }
  .text-link:hover > span,
  .context-links a:hover > span,
  .needs-nav a:hover > span:last-child,
  .audience-entry a:hover b,
  .service-card:hover .service-card-action > span { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .faq-items summary:hover,
  .service-detail > summary:hover { background: #eee6d5; }
}
.segmented button:active,
.audience-switch button:active,
.button:active { transform: translateY(1px); }
@media (max-width: 1100px) {
  .forecast-heading .interaction-control { margin-top: 24px; width: max-content; max-width: 100%; }
}
@media (max-width: 900px) {
  .operation-controls .interaction-control { width: 100%; }
}
@media (max-width: 620px) {
  .interaction-hint,
  .operation-controls .interaction-hint { font-size: 12px; }
  .segmented { gap: 6px; padding: 5px; }
  .segmented button,
  .operation-controls .segmented button,
  .forecast-heading .segmented button { min-height: 52px; padding: 10px 8px; font-size: 12px; }
  .forecast-heading .interaction-control { width: 100%; }
  .audience-switch button { padding-right: 12px; }
  .audience-switch button::after { font-size: 11px; padding-top: 12px; }
  .needs-nav a { grid-template-columns: 16px minmax(0, 1fr) 24px; }
  .needs-nav a > span:last-child { min-width: 24px; height: 24px; font-size: 16px; }
  .text-link > span { min-width: 28px; height: 28px; font-size: 18px; }
  .questions-heading h2,
  .questions-heading h3 { font-size: 28px; }
  .faq-items summary,
  .service-detail > summary { padding-inline: 10px; gap: 12px; }
}
@media (max-width: 360px) {
  .audience-switch button::after { grid-column: 2; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .segmented button,
  .audience-switch button,
  .button { transform: none !important; }
}