/* Gallino Marine — tokens */
:root {
  /* colores tomados del logo */
  --navy: #041C40;
  --navy-2: #0B3470;
  --blue: #1F6FD6;
  --blue-hi: #2484F4;
  --wave: #2C88E4;

  --grad-navy: linear-gradient(140deg, #041C40 0%, #072A5C 55%, #0F4A99 100%);
  --grad-blue: linear-gradient(120deg, #2C8CF6 0%, #1F6FD6 50%, #1757B8 100%);
  --grad-wave: linear-gradient(90deg, #041C40 0%, #1F6FD6 60%, #2C88E4 100%);
  --grad-paper: linear-gradient(180deg, #FFFFFF 0%, #EDF3FB 100%);
  --paper: #F3F5F8;
  --paper-2: #E4EAF1;
  --ink: #041C40;
  --ink-soft: #46566D;
  --on-navy: #FFFFFF;
  --on-navy-soft: #B9C8DC;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --text: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-giant: clamp(3.25rem, 1rem + 6.4vw, 7.25rem);

  --m: 0px;                /* el hero llega a los bordes del viewport */
  --gutter: clamp(16px, 3vw, 32px);
  --section: clamp(96px, 12vw, 200px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* con viewport-fit=cover, en horizontal el contenido no queda bajo el notch */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 12px 16px; z-index: 10; }
.skip:focus { left: 8px; }

h1, h2, .sheet__title, .foot__links a {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--blue); color: #fff;
  font-weight: 600; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn:hover { background: var(--navy); }
.btn:active { transform: scale(0.97); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--blue); color: #fff; }
.btn--block { display: flex; width: 100%; }

.mode { display: inline-flex; background: var(--paper-2); padding: 4px; gap: 4px; }
.mode__btn {
  border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 0 18px;
  font-weight: 600; color: var(--ink-soft);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.mode__btn:hover { color: var(--ink); }
.mode__btn:active { transform: scale(0.97); }
.mode__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }

.textlink { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Wordmark ---------- */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m);
  padding: var(--m);
  min-height: 100svh;
}
.hero__sheet {
  grid-column: 1; grid-row: 1;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 28px clamp(24px, 3vw, 48px) 0;
  text-align: center;
  min-height: calc(100svh - 2 * var(--m));
}
.hero__nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.hero__nav a:not(.brand) { font-weight: 600; text-decoration: none; font-size: var(--step-small); padding: 10px 0; }
.hero__nav a:not(.brand):first-child { justify-self: start; }
.hero__nav a:not(.brand):last-child { justify-self: end; }
.hero__nav a:not(.brand):hover { color: var(--blue); }

.hero__body {
  align-self: start;
  padding-top: calc(34svh - 120px);
  padding-bottom: 22svh;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 {
  font-size: clamp(3rem, 6.2vw, 7.5rem);
  color: var(--navy);
  line-height: 0.88;
}
.lines .line { display: block; overflow: hidden; padding: 0.14em 0 0.06em; margin: -0.14em 0 -0.06em; }
.lines [data-line] { display: block; }
.hero__lead { margin-top: 28px; max-width: 40ch; color: var(--ink); }
.hero .mode { margin-top: 32px; }
.hero .btn { margin-top: 16px; min-width: 280px; }

.hero__photo {
  grid-column: 2; grid-row: 1;
  position: sticky; top: var(--m);
  height: calc(100svh - 2 * var(--m));
  overflow: hidden;
  /* degradado y no color sólido: Safari tiñe la barra de estado con el background-color de los elementos fijos */
  background: var(--grad-navy);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms var(--ease-in-out);
}
.hero__slides img.is-on { opacity: 1; }
.hero__slides img:nth-child(1) { object-position: 30% 50%; }
.hero__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 56px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; color: var(--ink);
  font-size: 1rem;
}
.hero__bar a { font-weight: 600; text-decoration: none; }
.hero__bar a:hover { color: var(--blue); }

/* ---------- List: the printed sheet ---------- */
.sheetband {
  position: relative;
  padding: clamp(64px, 9vw, 140px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background: var(--navy);
  overflow: hidden;
}
.sheetband__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sheet {
  position: relative;
  grid-column: 7 / span 6;
  justify-self: start;
  width: min(640px, 100%);
  background: #fff;
  padding: 72px 64px 64px;
  text-align: center;
  /* scalloped paper edge: a mask shape, not a visible gradient */
  -webkit-mask: /* taste-skill-ignore */
    radial-gradient(circle 10px at 50% 0, transparent 9.5px, #000 10px) top / 28px 51% repeat-x, /* taste-skill-ignore */
    radial-gradient(circle 10px at 50% 100%, transparent 9.5px, #000 10px) bottom / 28px 51% repeat-x; /* taste-skill-ignore */
  mask: /* taste-skill-ignore */
    radial-gradient(circle 10px at 50% 0, transparent 9.5px, #000 10px) top / 28px 51% repeat-x, /* taste-skill-ignore */
    radial-gradient(circle 10px at 50% 100%, transparent 9.5px, #000 10px) bottom / 28px 51% repeat-x; /* taste-skill-ignore */
}
.sheet__title { font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem); color: var(--navy); }
.sheet__note { margin-top: 12px; font-size: 1rem; color: var(--ink-soft); }
.sheet__group { margin-top: 56px; }
.sheet__group h3 { font-size: 1.375rem; font-weight: 600; color: var(--blue); margin-bottom: 20px; }
.sheet__group ul { max-width: 440px; margin: 0 auto; text-align: left; display: grid; gap: 18px; }
.sheet__group li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
.sheet__group .it { font-weight: 600; }
.sheet__group .sz { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sheet__group small { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.sheet__brands .brands__label { font-size: var(--step-small); color: var(--ink-soft); margin-top: 16px; }
.sheet__brands .brands__label:first-of-type { margin-top: 0; }
.sheet__brands .brands__list { font-weight: 600; line-height: 1.5; max-width: 440px; margin: 4px auto 0; }
.sheet__brands .brands__list span { white-space: nowrap; }
.sheet__brands small { display: block; margin-top: 18px; font-size: 0.875rem; color: var(--ink-soft); }
.sheet__end { margin-top: 56px; font-size: 1rem; color: var(--ink-soft); }

/* ---------- How it works: drag row ---------- */
.row { padding-top: var(--section); overflow: hidden; }
.row__head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 0 var(--gutter);
}
.row__head h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); color: var(--navy); }
.row__controls { display: flex; gap: 8px; align-items: center; }
.sq {
  width: 48px; height: 48px; border: 0; cursor: pointer;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease;
}
.sq:hover { background: var(--blue); }
.sq:active { transform: scale(0.94); }
.sq[disabled] { opacity: 0.35; cursor: default; }
.sq svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.row__progress { margin: 24px var(--gutter) 0; height: 6px; background: var(--paper-2); }
.row__progress span {
  display: block; height: 100%; background: var(--navy);
  transform-origin: left; transform: scaleX(0.15);
  transition: transform 120ms linear;
}
.row__track {
  display: flex; gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 40px var(--gutter) 8px;
  scrollbar-width: none;
  cursor: grab;
}
.row__track::-webkit-scrollbar { display: none; }
.row__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.row__track.is-dragging * { user-select: none; pointer-events: none; }
.moment {
  flex: 0 0 300px; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.moment h3 { font-size: var(--step-body); font-weight: 600; line-height: 1.3; }
.moment p { margin-top: 8px; font-size: 1rem; color: var(--ink-soft); min-height: 4.65em; }
.moment img {
  margin-top: var(--gap, 80px);
  aspect-ratio: 4 / 5; width: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-soft);
}
.moment:hover img { transform: scale(1.02); }
[data-mode-text] { transition: opacity 200ms ease; }
.is-swapping [data-mode-text] { opacity: 0; }

/* ---------- About ---------- */
.wrap { padding: 0 var(--gutter); }

/* ---------- FAQ ---------- */
.faq {
  margin-top: var(--section);
  background: var(--navy); color: var(--on-navy);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gutter);
  padding: 0 var(--gutter);
  overflow: visible;
}
.faq__text { grid-column: 1 / span 5; padding: clamp(80px, 9vw, 140px) 0; }
.faq h2 { font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem); }
.faq__list { margin-top: 32px; display: grid; gap: 4px; }
.faq details { padding: 14px 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: var(--step-body); font-weight: 600; line-height: 1.35;
  min-height: 44px;
  transition: color var(--t-hover) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-hi); }
.faq summary::after {
  content: ""; flex: 0 0 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-ui) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { margin-top: 10px; color: var(--on-navy-soft); font-size: 1rem; max-width: 52ch; }
.faq details[open] p { animation: open var(--t-ui) var(--ease-out); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.faq__actions { margin-top: 44px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.faq__actions .textlink { color: #fff; }

.faq__media { grid-column: 7 / span 6; position: relative; margin-top: -80px; margin-bottom: 80px; }
.faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; }
.faq__square {
  position: absolute; left: -40px; bottom: -40px;
  width: 36%; aspect-ratio: 1; object-fit: cover; object-position: 45% 50%;
  border: 10px solid var(--navy);
}

/* ---------- Contact (live composer) ---------- */
.contact { position: relative; min-height: 100svh; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-start; }
.contact__photo { position: absolute; inset: 0; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.card {
  /* en flujo: la sección crece con la tarjeta (el último tramo queda libre para el degradado hacia el pie) */
  position: relative; margin: 60px 60px 140px 0; flex: none;
  width: 420px;
  background: var(--paper);
  padding: 32px 32px 0;
  display: grid; gap: 20px;
}
.card h2 { font-size: 2.25rem; color: var(--navy); }
.mode--card { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); }
.kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kinds legend { font-size: var(--step-small); color: var(--ink-soft); margin-bottom: 8px; padding: 0; }
.kinds label { position: relative; cursor: pointer; }
.kinds input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kinds span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  background: var(--paper-2); font-weight: 600; font-size: 1rem;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.kinds label:hover span { background: #d5dee9; }
.kinds label:active span { transform: scale(0.96); }
.kinds input:checked + span { background: var(--blue); color: #fff; }
.kinds input:focus-visible + span { outline: 3px solid var(--blue-hi); outline-offset: 2px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--step-small); color: var(--ink-soft); display: flex; justify-content: space-between; }
.field output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.field input[type="text"] {
  min-height: 46px; padding: 0 14px; background: #fff; border: 2px solid var(--paper-2);
  font-size: 1rem; border-radius: 0;
  transition: border-color var(--t-hover) ease;
}
.field input[type="text"]:focus { border-color: var(--blue); outline: none; }
input[type="range"] { width: 100%; accent-color: var(--blue); height: 28px; margin: 0; cursor: pointer; }
.field[hidden] { display: none; }
.card__preview {
  background: #fff; padding: 14px 16px; font-size: 1rem; line-height: 1.5; color: var(--ink);
  min-height: 5.2em;
}
.card .btn--block { margin: 0 -32px; width: calc(100% + 64px); min-height: 56px; }
.card__hint { font-size: var(--step-small); color: var(--ink-soft); margin: -12px 0 16px; text-align: center; }
.card__hint.is-done { color: var(--blue); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .contact__photo img { animation: drift 32s var(--ease-in-out) infinite alternate; }
}
@keyframes drift { from { transform: scale(1.08) translateX(-1.5%); } to { transform: scale(1.02) translateX(1%); } }

/* ---------- Footer ---------- */
.foot { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--navy); color: #fff; }
.foot__photo { overflow: hidden; }
.foot__photo { position: relative; }
.foot__photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.foot__menu { padding: 72px clamp(24px, 5vw, 80px) 28px; display: flex; flex-direction: column; }
.foot__links { margin-top: 48px; display: grid; gap: 18px; }
.foot__links a {
  display: inline-block; text-decoration: none;
  font-size: clamp(2.5rem, 1.8rem + 2vw, 3.75rem);
  transition: transform var(--t-ui) var(--ease-out), color var(--t-hover) ease;
}
.foot__links:hover a { color: var(--on-navy-soft); }
.foot__links a:hover, .foot__links a:focus-visible { color: #fff; transform: translateX(12px); }
.foot__blocks { margin-top: 64px; display: flex; gap: 48px; font-size: 1rem; }
.foot__blocks a { font-weight: 600; text-underline-offset: 4px; }
.credits { max-width: 70ch; margin-top: 48px; font-size: var(--step-small); color: var(--on-navy-soft); line-height: 1.5; }
.credits a { color: #fff; }
.legal { margin-top: auto; padding-top: 32px; font-size: var(--step-small); color: var(--on-navy-soft); }

/* ---------- Motion: entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: lineUp 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .js .hero__slides img.is-on:first-child { animation: settle 2400ms var(--ease-soft) both; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .moment { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .moment.is-in { opacity: 1; transform: none; }
  .js .sheet__group li { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .sheet.is-in .sheet__group li { opacity: 1; transform: none; }
  .js [data-unveil] img { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); }
  .js [data-unveil] img + img { transition-delay: 220ms; }
  .js [data-unveil].is-in img { clip-path: inset(0 0 0 0); }
}
@keyframes lineUp { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 6vw; }
  .sheet { grid-column: 3 / span 10; }
  .card { margin: 40px 32px 140px 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding: var(--m); gap: 0; min-height: 0; }
  .hero__photo { grid-column: 1; grid-row: 1; height: calc(56svh + env(safe-area-inset-top, 0px)); position: sticky; top: var(--m); z-index: 0; }
  .hero__sheet { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin-top: -48px; min-height: 0; padding: 20px 20px 40px; }
  .hero__bar { font-size: 0.875rem; padding: 0 14px; bottom: 48px; }
  .hero__bar span { display: none; }
  .hero__body { padding: 40px 0 8px; }
  .hero__nav { grid-template-columns: 1fr; }
  .hero__nav a:not(.brand) { display: none; }
  .hero__nav .brand { justify-self: center; font-size: 2rem; }
  .hero h1 { font-size: 12.4vw; }
  .hero .mode { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .mode__btn { padding: 0 8px; white-space: nowrap; }
  .hero .btn { width: 100%; min-width: 0; }

  .sheetband { padding: 56px 10px; }
  .sheet { grid-column: 1 / -1; width: 100%; padding: 56px 24px 48px; }
  .sheet__group h3 { font-size: 1.25rem; }

  .row__head { align-items: start; }
  .row__controls { width: 100%; }
  .row__controls .sq { display: none; }
  .row__controls .mode { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .row__track { gap: 16px; }
  .moment { flex-basis: 74vw; }
  .moment img { margin-top: calc(var(--gap, 80px) * 0.45); }


  .faq { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .faq__media { grid-column: 1; grid-row: 1; margin: 0 calc(var(--gutter) * -1); }
  .faq__tall { aspect-ratio: 4 / 5; }
  .faq__square { left: auto; right: 16px; bottom: -32px; width: 40%; }
  .faq__text { grid-column: 1; padding: 64px 0 72px; }
  .faq h2 { font-size: 2.75rem; }
  .faq__actions .btn { width: 100%; }

  .contact { min-height: 0; display: flex; flex-direction: column; justify-content: normal; align-items: stretch; }
  .contact__photo { position: relative; height: 70svh; }
  .card { position: relative; top: auto; right: auto; width: auto; margin: -80px 16px 0; padding: 24px 20px 0; }
  .card .btn--block { margin: 0 -20px; width: calc(100% + 40px); }

  .foot { grid-template-columns: 1fr; min-height: 0; }
  .foot__photo { height: 50svh; }
  .foot__menu { padding: 48px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .foot__links { gap: 12px; margin-top: 32px; }
  .foot__links a { font-size: 11vw; }
  .foot__blocks { flex-direction: column; gap: 16px; }
}


/* =========================================================
   Marca: logo, wordmark y degradados
   ========================================================= */

/* Gallino Marine siempre en la tipografía y colores del logo */
.gm {
  font-family: "Montserrat", var(--text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: 0.92em;
  white-space: nowrap;
}
.gm__a { color: var(--navy); }
.gm__b { color: var(--blue-hi); }
.faq .gm__a, .foot .gm__a { color: #fff; }

/* El "badge" del logo: placa navy con filete blanco interior */
.gm--badge {
  display: inline-flex; align-items: center; gap: 0.32em;
  font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.5rem);
  line-height: 1;
  padding: 0.5em 0.8em 0.46em;
  background: var(--grad-navy);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3.5px rgba(255,255,255,0.9);
}
.gm--badge .gm__a { color: #fff; }

.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.brand__boat { width: clamp(96px, 7vw, 132px); height: auto; }
.brand--foot { align-items: flex-start; }
.brand--foot .brand__boat { width: 150px; }
.hero__nav { align-items: center; }

/* Degradados */
.hero__sheet { background: var(--grad-paper); }
.btn {
  background: var(--grad-blue);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position 400ms var(--ease-out), transform var(--t-press) var(--ease-out);
}
.btn:hover { background: var(--grad-blue); background-size: 200% 100%; background-position: 100% 0; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--grad-blue); background-size: 100% 100%; color: #fff; }
.mode__btn[aria-pressed="true"] { background: var(--grad-navy); }
.kinds input:checked + span { background: var(--grad-blue); }
.sq { background: var(--grad-navy); }
.sq:hover { background: var(--grad-blue); }
.row__progress span { background: var(--grad-wave); }
.sheetband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,28,64,0.55) 0%, rgba(4,28,64,0) 35%, rgba(4,28,64,0) 60%, rgba(15,74,153,0.6) 100%);
}
.sheet { z-index: 1; }
.sheet__group h3 {
  background: var(--grad-wave); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.faq { background: var(--grad-navy); }
.faq__square { border-color: #062452; }
.contact__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,28,64,0) 40%, rgba(4,28,64,0.45) 100%);
}
.card { background: var(--grad-paper); }
.card h2 .gm { font-size: 0.6em; }
.foot { background: var(--grad-navy); }
.foot__photo { position: relative; }
.foot__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,28,64,0) 55%, rgba(4,28,64,0.85) 100%);
}

/* Slider de eslora con relleno */
input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent; height: 28px;
  --fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1F6FD6 0%, #2C8CF6 var(--fill), var(--paper-2) var(--fill));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--paper-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--grad-blue); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--grad-navy); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(4,28,64,0.35);
  transition: transform var(--t-press) var(--ease-out);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #041C40; border: 3px solid #fff;
}
.field__range { font-size: var(--step-small); color: var(--ink-soft); }

@media (max-width: 960px) {
  .brand__boat { width: 120px; }
  .foot__photo::after { background: linear-gradient(180deg, rgba(4,28,64,0) 55%, rgba(4,28,64,0.9) 100%); }
}

/* Cambio de fotos al elegir comprar / vender */
.moment img { transition: transform 600ms var(--ease-soft), opacity 260ms ease, filter 260ms ease; }
.moment img.is-fading { opacity: 0; filter: blur(6px); transform: scale(0.98); }
.hero__slides img { transition: opacity 1100ms var(--ease-in-out); }


/* Logo del footer sobre fondo blanco, igual que el original */
.brand--foot {
  align-self: flex-start;
  align-items: center;
  background: #fff;
  padding: 18px 24px 20px;
  border-radius: 12px;
}
.brand--foot .brand__boat { width: 150px; }

/* El logo no es un enlace: conserva el hover pero sin cursor de clic */
.brand { cursor: default; user-select: none; }
.brand__boat { pointer-events: auto; }

/* =========================================================
   Redes: íconos
   ========================================================= */
.ico { width: 1.25em; height: 1.25em; flex: none; }
.social { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; font-weight: 600; transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.social:hover { transform: translateX(3px); }
.social .ico--wa { color: #25D366; }
.social .ico--ig { color: var(--blue-hi); }
.hero__bar .social .ico--ig { color: var(--navy); }
.faq .social .ico--ig, .foot .social .ico--ig { color: #fff; }
.foot__blocks a.social { text-decoration: none; }
.foot__blocks p { display: grid; gap: 10px; }
.foot__blocks p br { display: none; }
.faq__actions .social { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.btn .ico { margin-right: 10px; }
.btn--block { gap: 0; }

/* =========================================================
   Confianza: más de 10 años
   ========================================================= */
.trust {
  margin-top: var(--section);
  background: var(--grad-navy); color: #fff;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: clamp(64px, 8vw, 128px) var(--gutter);
}
.trust__num {
  font-family: var(--display); line-height: 0.8;
  font-size: clamp(9rem, 26vw, 25rem);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 10%, #8EC1FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: flex; align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.trust__plus { font-size: 0.55em; margin-left: 0.04em; margin-top: 0.02em; color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }
.trust h2 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem); line-height: 1.04; }
.trust__lead { margin-top: 24px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.4; color: #DCE8F8; }
.trust__points { margin-top: 36px; display: grid; gap: 16px; max-width: 52ch; }
.trust__points li { padding-left: 22px; position: relative; color: #DCE8F8; }
.trust__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--wave); }
.trust__points strong { color: #fff; }

/* =========================================================
   Botón flotante de WhatsApp
   ========================================================= */
.fab {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: 64px; height: 64px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 8px 22px rgba(4, 28, 64, 0.35);
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease, visibility var(--t-ui);
}
.fab .ico { width: 34px; height: 34px; }
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(0.95); }
.fab.is-away { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.fab__tip {
  position: absolute; right: 76px; top: 50%; transform: translate(8px, -50%);
  background: var(--navy); color: #fff; font-size: var(--step-small); font-weight: 600; white-space: nowrap;
  padding: 10px 14px; opacity: 0; pointer-events: none;
  transition: opacity var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
.fab:hover .fab__tip, .fab:focus-visible .fab__tip { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: no-preference) {
  .js .fab { animation: fabIn 700ms var(--ease-out) 1.6s backwards; }
  .fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ping 2.6s var(--ease-out) 2.6s 3; pointer-events: none; }
}
@keyframes fabIn { from { opacity: 0; transform: scale(0.6) translateY(16px); } }
@keyframes ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.7); opacity: 0; } }

@media (max-width: 960px) {
  .trust { grid-template-columns: 1fr; gap: 24px; }
  .trust__num { font-size: 42vw; }
  .fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; }
  .fab__tip { display: none; }
}

/* Footer: toda la mitad del menú sobre fondo blanco, con el logo original */
.foot__menu { background: #fff; color: var(--ink); }
.brand--foot { background: none; padding: 0; border-radius: 0; align-self: flex-start; }
.foot__links:hover a { color: var(--ink-soft); }
.foot__links a:hover, .foot__links a:focus-visible { color: var(--blue); }
.foot__links a { color: var(--navy); }
.foot .gm__a { color: var(--navy); }
.foot .gm--badge .gm__a { color: #fff; }
.foot__menu .social .ico--ig { color: var(--blue); }
.foot__menu .credits, .foot__menu .legal { color: var(--ink-soft); }
.foot__menu .credits a { color: var(--navy); }
.foot__blocks a { color: var(--navy); }
.foot__photo::after { background: linear-gradient(90deg, rgba(4,28,64,0) 80%, rgba(4,28,64,0.25) 100%); }
@media (max-width: 960px) {
  .foot__photo::after { background: none; }
}
.foot__blocks p:first-child br { display: inline; }
.social .ico--mail { color: var(--blue-hi); }
.foot__menu .social .ico--mail { color: var(--blue); }
.faq .social .ico--mail { color: #fff; }


/* =========================================================
   Gestión de la venta
   ========================================================= */
.manage { padding: var(--section) var(--gutter) 0; }
.manage__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gutter); align-items: end; }
.manage h2 { grid-column: 1 / span 8; font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem); line-height: 1.04; color: var(--navy); }
.manage__lead { grid-column: 9 / span 4; font-size: var(--step-lead); line-height: 1.4; max-width: 28ch; }
.manage__list { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: start; }
.manage__item:nth-child(2) { margin-top: 72px; }
.manage__item:nth-child(3) { margin-top: 24px; }
.manage__item img, .manage__item video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.manage__item h3 { margin-top: 20px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1; color: var(--navy); }
.manage__item p { margin-top: 10px; max-width: 34ch; color: var(--ink); }
@media (max-width: 960px) {
  .manage__head { grid-template-columns: 1fr; }
  .manage h2, .manage__lead { grid-column: 1; }
  .manage h2 { font-size: 8.6vw; }
  .manage__list { grid-template-columns: 1fr; gap: 40px; }
  .manage__item:nth-child(n) { margin-top: 0; }
  .manage__item img, .manage__item video { aspect-ratio: 4 / 3; }
}

/* =========================================================
   Header pill flotante (vidrio esmerilado)
   ========================================================= */
.pill {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(940px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 8px 8px 22px;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(4, 28, 64, 0.18);
}
.pill__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.pill__brand img { width: 52px; height: auto; }
.pill__brand .gm { font-size: 1.05rem; }
.pill__links { display: flex; gap: 4px; }
.pill__links a {
  display: block; padding: 10px 14px; border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--navy);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.pill__links a:hover { background: rgba(4, 28, 64, 0.08); color: var(--blue); }
.pill__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--grad-blue); color: #fff; font-weight: 600; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) ease;
}
.pill__cta:hover { filter: brightness(1.1); }
.pill__cta:active { transform: scale(0.96); }
@media (min-width: 961px) {
  /* tres columnas: los vínculos quedan centrados en la pill sin importar el ancho del logo y del botón */
  .pill { display: grid; grid-template-columns: 1fr auto 1fr; width: min(1120px, calc(100% - 24px)); gap: 24px; }
  .pill__brand { justify-self: start; }
  .pill__cta { justify-self: end; }
  /* el relleno izquierdo (22px) es mayor que el derecho (8px): se compensa para centrar justo en la pill */
  .pill__links { position: relative; left: -7px; }
  /* el logo grande del hero ya está a la vista: el de la pill aparece al bajar */
  .pill__brand { opacity: 0; transform: translateX(-6px); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
  .pill.is-scrolled .pill__brand { opacity: 1; transform: none; }
  .hero__nav { margin-top: 64px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .pill__links { gap: 0; }
  .pill__links a { padding: 10px 9px; font-size: 0.875rem; }
  .pill__brand { gap: 8px; }
  .pill__brand .gm { font-size: 0.9rem; }
  .pill__brand img { width: 50px; }
}
@media (min-width: 961px) and (max-width: 1040px) {
  /* en pantallas justas queda solo el logo, para que no choque con los vínculos */
  .pill__brand .gm { display: none; }
}
@media (max-width: 960px) {
  .pill { padding-left: 16px; }
  .pill__links { display: none; }
  .pill__brand img { width: 46px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .pill { animation: pillIn 700ms var(--ease-out) 200ms both; }
}
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, -16px); } }
.contact, .manage, .about, .faq, .sheetband, .trust { scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }

/* =========================================================
   WhatsApp flotante: vidrio azul del logo
   ========================================================= */
.fab {
  background: rgba(36, 132, 244, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 28px rgba(31, 111, 214, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff;
}
.fab:hover { background: rgba(36, 132, 244, 0.8); }
.fab::after { border-color: #2484F4; }
.fab__tip { background: rgba(4, 28, 64, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; }
.hero__nav { display: flex; justify-content: center; grid-template-columns: none; }

/* Logo siempre en el header pill; el hero ya no lleva logo propio */
.hero__sheet { grid-template-rows: 1fr; }
@media (min-width: 961px) {
  .pill__brand { opacity: 1; transform: none; }
  .pill__brand img { width: 60px; }
}

/* Entrada y salida suave del botón flotante al scrollear */
.fab {
  transition:
    transform 450ms var(--ease-out),
    opacity 350ms ease,
    filter 350ms ease,
    background-color var(--t-hover) ease,
    visibility 0s linear 0s;
}
.fab.is-away {
  opacity: 0; filter: blur(8px);
  transform: translateY(18px) scale(0.7);
  visibility: hidden;
  transition:
    transform 450ms var(--ease-out),
    opacity 350ms ease,
    filter 350ms ease,
    visibility 0s linear 450ms;
}
@media (prefers-reduced-motion: reduce) {
  .fab, .fab.is-away { transition: opacity 150ms ease, visibility 0s linear 150ms; filter: none; transform: none; }
}


/* =========================================================
   Transiciones suaves entre módulos
   Cada borde se disuelve en el módulo vecino, sin cortes.
   Los degradados de los módulos azules son verticales para que
   el color de cada borde sea parejo de lado a lado.
   ========================================================= */
:root {
  --fade: clamp(80px, 14vw, 200px);
  --grad-navy-v: linear-gradient(180deg, #041C40 0%, #072A5C 55%, #0F4A99 100%);
}

/* Módulos azules: arriba #041C40, abajo #0F4A99 */
.trust { position: relative; background: var(--grad-navy-v); }
.faq { position: relative; background: var(--grad-navy-v); }
.foot { position: relative; background: var(--grad-navy-v); }

/* Papel -> azul: el degradado llena el espacio vacío que había arriba */
.trust::before,
.faq::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--section); pointer-events: none;
  background: linear-gradient(0deg, #041C40 0%, rgba(4, 28, 64, 0) 100%);
}

/* Azul -> foto (Lo que vendemos) y foto -> papel */
.sheetband::after {
  background:
    linear-gradient(180deg, #0F4A99 0%, rgba(15, 74, 153, 0) var(--fade)),
    linear-gradient(0deg, var(--paper) 0%, rgba(243, 245, 248, 0) var(--fade)),
    linear-gradient(180deg, rgba(4,28,64,0.55) 0%, rgba(4,28,64,0) 35%, rgba(4,28,64,0) 60%, rgba(15,74,153,0.6) 100%);
}

/* Azul -> foto (consulta) */
.contact__photo::after {
  background:
    linear-gradient(180deg, #0F4A99 0%, rgba(15, 74, 153, 0) var(--fade)),
    linear-gradient(90deg, rgba(4,28,64,0) 40%, rgba(4,28,64,0.45) 100%);
}

/* Foto -> pie de página */
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 120px; pointer-events: none;
  background: linear-gradient(0deg, #041C40 0%, rgba(4, 28, 64, 0) 100%);
}
.foot__photo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: 120px; pointer-events: none;
  background: linear-gradient(180deg, #041C40 0%, rgba(4, 28, 64, 0) 100%);
}

/* En escritorio el pie se sube sobre el final de la foto de la consulta: el video y el menú
   aparecen disolviéndose sobre ella, sin franja vacía entre ambas imágenes */
@media (min-width: 961px) {
  .foot {
    margin-top: -140px; z-index: 1;
    background: transparent;
  }
  .foot::before, .foot__photo::before { display: none; }
  .foot__photo, .foot__menu {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px);
    mask-image: linear-gradient(180deg, transparent 0, #000 140px);
  }
  .foot__menu { padding-top: 212px; }
  /* el video también se disuelve a blanco hacia el menú de la derecha */
  .foot__photo::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto; z-index: 1;
    width: clamp(100px, 14vw, 220px); pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  }
}

@media (max-width: 960px) {
  /* La tarjeta de consulta queda sobre papel: espacio para disolver hacia el pie */
  .contact { padding-bottom: 64px; }
  .contact__photo::after {
    background:
      linear-gradient(180deg, #0F4A99 0%, rgba(15, 74, 153, 0) var(--fade)),
      linear-gradient(0deg, var(--paper) 0%, rgba(243, 245, 248, 0) 160px),
      linear-gradient(90deg, rgba(4,28,64,0) 40%, rgba(4,28,64,0.45) 100%);
  }
  .foot::before { height: 64px; }
  /* La foto de las preguntas se funde con el azul de arriba y de abajo */
  .faq__tall {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
  }
}

/* =========================================================
   Teléfono, gancho de tasación y prueba social
   ========================================================= */

/* Header: teléfono + consulta */
.pill__actions { display: flex; align-items: center; gap: 8px; }
.pill__tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.pill__tel:hover { background: rgba(4, 28, 64, 0.08); color: var(--blue); }
.pill__tel:active { transform: scale(0.96); }
.pill__tellbl { display: none; }
@media (min-width: 961px) {
  .pill__actions { justify-self: end; }
  /* más ancha para que logo, vínculos y teléfono entren sin pisarse */
  .pill { width: min(1280px, calc(100% - 24px)); }
}
@media (min-width: 961px) and (max-width: 1319px) {
  /* en pantallas justas queda solo el ícono: el número no cabe junto a los vínculos */
  .pill__telnum { display: none; }
  .pill__tel { padding: 0 12px; }
}
@media (max-width: 960px) {
  .pill__telnum { display: none; }
  .pill__tellbl { display: inline; }
  .pill__tel { padding: 0 12px; background: rgba(4, 28, 64, 0.08); }
}
@media (max-width: 480px) {
  /* en celular: logo + Llamar + Consulta, sin el nombre escrito */
  .pill__brand .gm { display: none; }
  .pill { padding-left: 12px; gap: 8px; }
  .pill__cta { padding: 0 18px; }
}

/* Gancho de tasación (solo al vender) */
.offer { display: none; margin-top: 20px; max-width: 40ch; padding: 12px 16px; text-align: left; font-size: var(--step-small); line-height: 1.4; color: var(--ink-soft); background: rgba(31, 111, 214, 0.08); border-left: 4px solid var(--blue); }
.offer strong { display: block; font-size: 1.125rem; font-weight: 600; color: var(--navy); }
body[data-mode="vender"] .offer { display: block; }
.hero .offer + .btn { margin-top: 16px; }

/* El botón flotante no pisa la barra de Instagram del hero en escritorio */
@media (min-width: 961px) {
  .hero__bar { padding-right: 112px; }
}

/* Hero en celular: el botón principal entra en la primera pantalla */
@media (max-width: 960px) {
  .hero__photo { height: calc(30svh + env(safe-area-inset-top, 0px)); }
  .hero__sheet { padding: 14px 20px 28px; }
  .hero__body { padding: 20px 0 0; }
  .hero__lead { margin-top: 16px; font-size: 1rem; line-height: 1.45; }
  .hero .mode { margin-top: 20px; }
  .hero .btn { margin-top: 12px; }
  .hero .offer { margin-top: 12px; padding: 10px 14px; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .hero h1 { font-size: 11vw; }
  .hero__lead { font-size: 0.9375rem; }
}

/* Prueba social y datos del negocio */
.trust__since { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--step-small); color: var(--on-navy-soft); margin-bottom: 12px; }
.trust__proof { margin-top: 32px; }
.trust__proof .textlink { color: #fff; }
.card__alt { font-size: var(--step-small); color: var(--ink-soft); text-align: center; margin: -4px 0 20px; line-height: 1.5; }
.card__alt a { font-weight: 600; color: var(--navy); text-underline-offset: 3px; }
.card__alt a:hover { color: var(--blue); }
.social .ico--tel, .social .ico--pin { color: var(--blue-hi); }
.foot__menu .social .ico--tel, .foot__menu .social .ico--pin { color: var(--blue); }

/* =========================================================
   Opiniones (reseñas de Google)
   ========================================================= */
.reviews { padding: var(--section) var(--gutter) 0; scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }
.reviews__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gutter); align-items: end; }
.reviews h2 { grid-column: 1 / span 8; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.04; color: var(--navy); }
.reviews__score { grid-column: 9 / span 4; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-soft); }
.reviews__score strong { font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--navy); }
.reviews__stars { color: var(--blue); letter-spacing: 0.1em; }
.reviews__list { margin-top: clamp(32px, 4vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.review { background: #fff; padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--blue); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.review blockquote { margin: 0; font-size: var(--step-lead); line-height: 1.35; color: var(--navy); }
.review figcaption { display: grid; gap: 2px; font-size: var(--step-small); color: var(--ink-soft); }
.review figcaption strong { font-size: 1rem; color: var(--ink); }
.reviews__more { margin-top: 32px; }
@media (max-width: 960px) {
  .reviews__head { grid-template-columns: 1fr; }
  .reviews h2, .reviews__score { grid-column: 1; }
  .reviews__list { grid-template-columns: 1fr; }
}

/* Autocompletado de marca */
.combo { position: relative; }
.combo input { width: 100%; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 2px solid var(--blue); box-shadow: 0 12px 28px rgba(4, 28, 64, 0.22);
}
.combo__list[hidden] { display: none; }
.combo__list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600;
}
.combo__list li small { font-weight: 400; font-size: var(--step-small); color: var(--ink-soft); }
.combo__list li:hover, .combo__list li.is-active { background: var(--blue); color: #fff; }
.combo__list li:hover small, .combo__list li.is-active small { color: rgba(255, 255, 255, 0.8); }

/* =========================================================
   Gancho de tasación y cifras
   ========================================================= */
.hero__sell { margin-top: 14px; font-size: var(--step-small); color: var(--ink-soft); }
.hero__sell a { font-weight: 600; color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 2px; }
body[data-mode="vender"] .hero__sell { display: none; }

.trust__stats { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 72px); }
.trust__stats dt { font-family: var(--display); font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.trust__stats dd { margin-top: 6px; color: #DCE8F8; font-size: 1rem; }

.appraisal { padding: var(--section) var(--gutter) 0; scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px)); }
.appraisal__head { max-width: 760px; display: grid; justify-items: start; gap: 20px; }
.appraisal h2 { font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem); line-height: 1.04; color: var(--navy); }
.appraisal__lead { font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.appraisal__steps { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.appraisal__steps li { background: #fff; padding: clamp(24px, 3vw, 36px); border-top: 4px solid var(--blue); }
.appraisal__steps span { font-family: var(--display); font-size: 2.5rem; line-height: 1; color: var(--blue); }
.appraisal__steps h3 { margin-top: 12px; font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.appraisal__steps p { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 960px) {
  .appraisal__steps { grid-template-columns: 1fr; }
  .appraisal .btn { width: 100%; }
}

/* Tasación: se disuelve desde el azul de arriba y hacia el azul de abajo */
.appraisal {
  position: relative;
  padding-top: calc(var(--fade) + 24px);
  padding-bottom: calc(var(--fade) + 24px);
}
.appraisal::before, .appraisal::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--fade); pointer-events: none;
}
.appraisal::before { top: 0; background: linear-gradient(180deg, #0F4A99 0%, rgba(15, 74, 153, 0) 100%); }
.appraisal::after { bottom: 0; background: linear-gradient(0deg, #0F4A99 0%, rgba(15, 74, 153, 0) 100%); }
.appraisal__head { max-width: 960px; }
.appraisal h2 { text-wrap: balance; }

/* Barra inferior del hero: la lista de rubros nunca se parte en dos líneas; si no entra, se oculta */
.hero__bar { container-type: inline-size; }
.hero__bar span { white-space: nowrap; font-size: 0.9375rem; color: var(--ink-soft); }
@container (max-width: 520px) {
  .hero__bar span { display: none; }
}

/* Gancho de tasación: sin filete de color en el costado */
.offer { border-left: 0; }

/* Preguntas frecuentes: la foto acompaña todo el alto del texto, aunque se sumen preguntas o se abran respuestas */
@media (min-width: 961px) {
  .faq__media { display: flex; flex-direction: column; }
  .faq__tall { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
}

/* =========================================================
   Sobre nosotros
   Quiénes somos y nuestra regla van juntos al lado de la foto;
   los datos prácticos (desde cuándo, horario, dónde, alcance)
   cierran el módulo en una franja de cuatro columnas.
   ========================================================= */
.about { padding-top: clamp(64px, 8vw, 128px); }
.about__title { font-size: var(--step-giant); color: var(--navy); }
.about__tiles { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px var(--gutter); align-items: center; }
.about__photo { grid-column: 1 / span 7; }
.about__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__text { grid-column: 8 / span 5; display: grid; gap: clamp(28px, 3vw, 44px); }
.about__lead { font-size: var(--step-body); line-height: 1.6; color: var(--ink); max-width: 46ch; }
.about__quote { margin: 0; }
.about__quote p { font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 600; line-height: 1.3; color: var(--navy); max-width: 24ch; text-wrap: balance; }
.about__facts { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gutter); }
.about__facts > div { padding-top: 16px; border-top: 1px solid rgba(4, 28, 64, 0.18); }
.about__facts dt { font-size: var(--step-small); color: var(--ink-soft); }
.about__facts dd { margin-top: 6px; font-size: var(--step-lead); font-weight: 600; line-height: 1.25; color: var(--navy); }
.about__map { display: inline-block; margin-top: 8px; font-size: var(--step-small); color: var(--blue); }
@media (min-width: 961px) and (max-width: 1100px) {
  .about__photo { grid-column: 1 / span 6; }
  .about__text { grid-column: 7 / span 6; }
}
@media (max-width: 960px) {
  .about__title { font-size: 16vw; }
  .about__tiles { grid-template-columns: 1fr; gap: 32px; }
  .about__photo, .about__text { grid-column: 1; }
  .about__facts { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .about__facts dd { font-size: 1.125rem; }
}

/* Preguntas frecuentes: la foto arranca dentro del azul (no sobre el degradado
   que viene del papel) y se disuelve en él arriba y abajo */
@media (min-width: 961px) {
  .faq__media { margin-top: 0; }
  .faq__tall {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
  }
}

/* La foto toma el alto de las preguntas cerradas (lo calcula main.js): abrir una respuesta no la estira */
@media (min-width: 961px) {
  .faq__media { align-self: start; height: calc(var(--faq-h, auto) - 80px); }
}