/* =============================================================
   site — shared chrome for inner pages (header, page hero, footer extras)
   ============================================================= */

.page-header {
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-bg);
}
.page-header__inner,
.site-header__inner {
  min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sm-gap-sm);
}
.site-header__inner { min-height: 104px; }

.nav-bar {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  margin-left: auto;
}
.nav {
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.375rem);
}
@media (min-width: 1101px) {
  .nav { display: flex; }
}
.nav a {
  font-size: 1rem; font-weight: 600; text-decoration: none;
}
.page-header .nav a { color: var(--sm-navy); }
.page-header .nav a[aria-current="page"] { color: var(--sm-navy-deep); }
@media (hover: hover) and (pointer: fine) {
  .page-header .nav a { transition: color var(--sm-dur-fast) var(--sm-ease); }
  .page-header .nav > a:not(.btn):hover,
  .page-header .nav-item:hover > a,
  .page-header .nav-item:focus-within > a { color: var(--sm-navy-deep); }
}

/* Servicios dropdown */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; }
.nav-drop { list-style: none; margin: 0; padding: 0; }

@media (min-width: 1101px) {
  .nav-drop {
    position: absolute;
    top: calc(100% + .15rem);
    left: 50%;
    transform: translateX(-50%) translateY(.35rem);
    min-width: 16.5rem;
    padding: .5rem 0;
    background: var(--sm-bg);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-photo);
    box-shadow: var(--sm-shadow-float);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    transition: opacity var(--sm-dur-fast) var(--sm-ease), transform var(--sm-dur-fast) var(--sm-ease), visibility var(--sm-dur-fast);
  }
  .nav-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: .85rem;
  }
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-drop a {
    display: block;
    padding: .65rem 1.15rem;
    color: var(--sm-navy);
    font-weight: 600;
    white-space: nowrap;
  }
  .page-header .nav-drop a,
  .site-header .nav-drop a { color: var(--sm-navy); }
  .nav-drop a:hover { background: var(--sm-surface); color: var(--sm-navy-deep); }
}

/* Horizontal review carousel (homepage + flotillas) */
.carousel { max-width: 40rem; }
.carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.carousel__track {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  transition: transform var(--sm-dur-slow) var(--sm-ease);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sm-gap-sm);
  margin-top: var(--sm-gap-md);
}
.carousel__btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--sm-navy);
  border-radius: var(--sm-radius-photo);
  background: var(--sm-bg);
  color: var(--sm-navy);
  cursor: pointer;
  padding: 0;
}
.carousel__btn svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .carousel__btn { transition: background var(--sm-dur-fast) var(--sm-ease), color var(--sm-dur-fast) var(--sm-ease); }
  .carousel__btn:hover { background: var(--sm-navy); color: var(--sm-on-dark); }
}
.carousel__dots {
  display: flex; align-items: center; gap: .5rem;
}
.carousel__dot {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: var(--sm-radius-pill);
  background: var(--sm-border-strong);
  cursor: pointer;
}
.carousel__dot[aria-selected="true"] { background: var(--sm-lime); width: 28px; }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* Mobile unfold — must follow desktop .nav rules so align-items/stretch wins */
@media (max-width: 1100px) {
  .page-header .nav,
  .site-header .nav {
    align-items: stretch;
    text-align: left;
  }
  .page-header .nav > a,
  .site-header .nav > a,
  .page-header .nav-item > a,
  .site-header .nav-item > a {
    text-align: left;
    text-decoration: none;
  }
}

.page-hero {
  position: relative;
  background: var(--sm-ink);
  isolation: isolate;
  min-height: clamp(16rem, 32vw, 22rem);
  display: flex; align-items: flex-end;
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero__media, .page-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero__media { z-index: -2; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: var(--sm-scrim-hero);
}
.page-hero .eyebrow { margin-bottom: var(--sm-gap-2xs); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--sm-gap-sm); max-width: 36rem; }

.ph {
  position: relative;
  background: var(--sm-surface);
  border: 2px dashed var(--sm-border-strong);
  border-radius: var(--sm-radius-photo);
  overflow: hidden;
  display: grid; place-items: center;
  min-height: 12rem;
  color: var(--sm-text-muted);
  font-size: var(--sm-text-xs);
  font-weight: 600;
  text-align: center;
  padding: var(--sm-gap-sm);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__tag {
  position: absolute; left: .75rem; top: .75rem; z-index: 1;
  background: var(--sm-lime); color: var(--sm-navy);
  font-size: var(--sm-text-2xs); font-weight: 700;
  letter-spacing: var(--sm-ls-label); text-transform: uppercase;
  padding: .35rem .6rem; border-radius: 4px;
}

.trust {
  padding-block: var(--sm-gap-xl);
  background: var(--sm-bg);
}
.trust__label {
  text-align: center;
  font-size: var(--sm-text-xs);
  font-weight: 700;
  letter-spacing: var(--sm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-gap-md);
}
.trust__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.trust__rail {
  display: flex;
  width: max-content;
  animation: trust-marquee 32s linear infinite;
  will-change: transform;
}
.trust__viewport:hover .trust__rail,
.trust__viewport:focus-within .trust__rail {
  animation-play-state: paused;
}
.trust__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sm-gap-lg);
  padding-inline-end: var(--sm-gap-lg);
  flex-shrink: 0;
  list-style: none;
  margin: 0;
}
.trust__item {
  width: 11.75rem; height: 5.85rem;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .4rem .5rem;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-photo);
  background: var(--sm-surface);
  font-family: var(--sm-font-display);
  font-size: clamp(.8rem, 1.2vw, .95rem);
  letter-spacing: var(--sm-ls-nav);
  text-transform: uppercase;
  color: var(--sm-navy);
  text-align: center;
  line-height: 1.15;
}
.trust__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.trust__note {
  margin-top: var(--sm-gap-sm);
  text-align: center;
  font-size: var(--sm-text-2xs);
  color: var(--sm-text-muted);
}
@keyframes trust-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__rail { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .trust__viewport { mask-image: none; overflow: visible; }
  .trust__grid { flex-wrap: wrap; justify-content: center; padding-inline: var(--sm-gutter); padding-inline-end: var(--sm-gutter); }
  .trust__grid[aria-hidden="true"] { display: none; }
}

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: var(--sm-text-xs);
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-gap-sm);
}
.breadcrumb a { color: var(--sm-navy); text-decoration: none; font-weight: 600; }
.breadcrumb span[aria-hidden] { opacity: .5; }
.page-hero .breadcrumb { color: var(--sm-on-dark-body); }
.page-hero .breadcrumb a { color: var(--sm-lime); }
.page-hero .breadcrumb span[aria-hidden] { color: var(--sm-on-dark-soft); opacity: .7; }

.social { display: flex; gap: var(--sm-gap-xs); }
.social a {
  width: 46px; height: 46px; border-radius: var(--sm-radius-pill);
  background: var(--sm-lime); color: var(--sm-navy);
  display: flex; align-items: center; justify-content: center;
}
.social svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.social li:first-child svg,
.social .social__g { fill: currentColor; stroke: none; }
.social .social__g { width: 22px; height: 22px; }

.wa {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--sm-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px #fff,
    0 8px 22px rgba(0, 0, 0, 0.35);
  animation: wa-hop 4.8s ease-in-out infinite;
}
.wa svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
  stroke: none;
}
@keyframes wa-hop {
  0%, 7%, 14%, 21%, 100% { transform: translateY(0); }
  3.5%, 10.5%, 17.5% { transform: translateY(-12px); }
}
@media (max-width: 1100px) {
  /* Sit above the full-width hero CTA — green-on-lime was invisible. */
  .wa { bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (hover: hover) and (pointer: fine) {
  .wa { transition: transform var(--sm-dur-fast) var(--sm-ease); }
  .wa:hover { animation-play-state: paused; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa { animation: none; }
}

/* ---------- "Así trabajamos" 4-step strip (service pages + nosotros) ---------- */
.steps-band {
  background: var(--sm-surface);
  padding-block: var(--sm-section-y);
}
.steps-band__title { text-align: center; margin-bottom: var(--sm-gap-xl); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sm-gap-md);
  margin: 0; padding: 0; list-style: none;
  text-align: left;
}
.steps li {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sm-gap-2xs);
  padding-top: var(--sm-gap-sm);
  border-top: 3px solid var(--sm-lime);
}
.steps__n {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-navy); color: var(--sm-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sm-font-display); font-size: 1.5rem; line-height: 1;
}
.steps h3 {
  font-family: var(--sm-font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--sm-ls-display);
  font-size: var(--sm-text-h4); line-height: var(--sm-lh-snug);
  color: var(--sm-navy);
}
.steps p { color: var(--sm-text-body); }
.steps--on-dark .steps__n {
  background: var(--sm-glass); border: 1px solid var(--sm-glass-border);
  color: var(--sm-lime);
}
.steps--on-dark h3 { color: var(--sm-on-dark); }
.steps--on-dark p { color: var(--sm-on-dark-body); }

/* ---------- preguntas frecuentes (accordion) ---------- */
.faq { padding-block: var(--sm-section-y); }
.faq__title { text-align: center; margin-bottom: var(--sm-gap-xl); }
.faq__list {
  max-width: 52rem;
  margin-inline: auto;
  border-top: 1px solid var(--sm-border);
}
.faq__item { border-bottom: 1px solid var(--sm-border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sm-gap-sm);
  padding-block: 1.25rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--sm-text-lead);
  font-weight: 700;
  line-height: var(--sm-lh-snug);
  color: var(--sm-navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  width: 2.25rem; height: 2.25rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-lime); color: var(--sm-navy);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p {
  max-width: 44rem;
  padding-bottom: 1.25rem;
  color: var(--sm-text-body);
}
.faq :focus-visible { outline-color: var(--sm-navy); }

/* ---------- cómo llegar ---------- */
.visit { padding-block: var(--sm-section-y); background: var(--sm-bg); }
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.visit__text .lead { margin-top: var(--sm-gap-sm); }
.visit__text .btn { margin-top: var(--sm-gap-lg); }
.visit__map {
  display: block;
  width: 100%;
  min-height: clamp(16rem, 36vw, 26rem);
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--sm-radius-photo);
  background: var(--sm-surface);
}
.visit :focus-visible { outline-color: var(--sm-navy); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .visit__text .btn { width: 100%; }
}

/* ---------- agendar dialog ---------- */
.agendar {
  width: min(52rem, calc(100% - 2 * var(--sm-gutter)));
  max-height: min(90vh, calc(100% - 2 * var(--sm-gutter)));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--sm-radius-photo);
  background: var(--sm-bg);
  box-shadow: var(--sm-shadow-float);
  color: var(--sm-text);
}
.agendar::backdrop {
  background: var(--sm-scrim-band);
}
.agendar__panel {
  position: relative;
  padding: var(--sm-gap-lg) var(--sm-gap-xl) var(--sm-gap-xl);
  overflow: auto;
  max-height: min(90vh, calc(100% - 2 * var(--sm-gutter)));
}
.agendar__panel .lead { margin-bottom: var(--sm-gap-lg); }
.agendar__close {
  position: absolute;
  top: var(--sm-gap-sm);
  right: var(--sm-gap-sm);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface);
  color: var(--sm-navy);
  cursor: pointer;
}
.agendar__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.agendar :focus-visible { outline-color: var(--sm-navy); }

.agendar .form { display: flex; flex-direction: column; gap: var(--sm-gap-sm); }
.agendar .form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm-gap-sm);
}
.agendar .field { display: flex; flex-direction: column; gap: .5rem; }
.agendar .field label { font-size: var(--sm-text-xs); font-weight: 600; color: var(--sm-text-body); }
.agendar .field input,
.agendar .field select,
.agendar .field textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 1.375rem;
  border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius-pill);
  background: var(--sm-bg);
  font-family: var(--sm-font-body);
  font-size: 1rem;
  color: var(--sm-text);
}
.agendar .field textarea {
  min-height: 9rem;
  padding: 1rem 1.375rem;
  border-radius: var(--sm-radius-field);
  line-height: var(--sm-lh-body);
  resize: vertical;
}
.agendar .field ::placeholder { color: var(--sm-text-muted); }
.agendar .form__consent { font-size: var(--sm-text-xs); color: var(--sm-text-muted); }
.agendar .form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-gap-2xs);
  cursor: pointer;
}
.agendar .form__check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .1rem;
  flex-shrink: 0;
  accent-color: var(--sm-navy);
}
.agendar .form__check a { color: var(--sm-navy); font-weight: 600; }
.agendar .form .btn { align-self: flex-start; }
.agendar .form__status:not(:empty) {
  margin-top: .5rem;
  font-weight: 600;
  color: var(--sm-navy);
}

@media (max-width: 640px) {
  .agendar__panel { padding: var(--sm-gap-md) var(--sm-gap-sm) var(--sm-gap-lg); }
  .agendar .form__row { grid-template-columns: minmax(0, 1fr); }
  .agendar .form .btn { width: 100%; }
}