/* ============================================================
   public.css - Shared visual system for public TrasterosGO surfaces
   Brand tokens live in tokens.css (--tg-* + legacy aliases),
   loaded globally by base.html.
   Canonical owner of the shared shell pieces: phone strip,
   floating WhatsApp, pub-footer, center search, FAQ, location.
   Loaded by landing, center, city and static public templates.
   ============================================================ */

/* ---- Typography: Montserrat for public pages ---- */
body.public-landing {
  background: #f7f9fb;
  font-family: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body.public-landing .landing-page {
  background: #f7f9fb;
}

/* ---- Shared public shell: phone strip + persistent WhatsApp ---- */
::selection {
  background: var(--tg-orange, #e59536);
  color: #fff;
}

/* ---- Premium button/utility classes (design handoff section 5) ---- */
.tg-btn-cta,
.tg-btn-navy,
.tg-btn-ghost {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 9px;
  height: 52px;
  justify-content: center;
  line-height: 1;
  padding: 0 26px;
  text-decoration: none;
  transition: all 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
  white-space: nowrap;
}

.tg-btn-cta {
  background: var(--tg-orange, #e59536);
  border: 1px solid var(--tg-orange, #e59536);
  color: #fff;
}

.tg-btn-cta:hover,
.tg-btn-cta:focus-visible {
  background: #fff;
  border-color: var(--tg-orange, #e59536);
  color: var(--tg-orange, #e59536);
  text-decoration: none;
}

.tg-btn-navy {
  background: var(--tg-navy, #0f294b);
  border: 1px solid var(--tg-navy, #0f294b);
  color: #fff;
}

.tg-btn-navy:hover,
.tg-btn-navy:focus-visible {
  background: var(--tg-navy-deep, #0a1d36);
  border-color: var(--tg-navy-deep, #0a1d36);
  color: #fff;
  text-decoration: none;
}

.tg-btn-ghost {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  color: var(--tg-navy, #0f294b);
  font-size: 14px;
  height: 48px;
  padding: 0 20px;
}

.tg-btn-ghost:hover,
.tg-btn-ghost:focus-visible {
  background: var(--tg-surface, #f7f9fb);
  border-color: var(--tg-navy, #0f294b);
  color: var(--tg-navy, #0f294b);
  text-decoration: none;
}

.tg-eyebrow {
  color: var(--tg-orange-ink, #c97616);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.tg-eyebrow--on-dark {
  color: var(--tg-orange, #e59536);
}

/* An eyebrow long enough to wrap on a phone. */
.tg-eyebrow--wrap {
  line-height: 1.4;
  text-wrap: balance;
}

/* The line above a hero headline: the home's motto and the claim of «Para tu
   centro» share one size and wrap in balanced lines. */
.tg-hero-eyebrow {
  --tg-hero-eyebrow-size: 16px;
  color: var(--tg-orange, #e59536);
  font-size: var(--tg-hero-eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (max-width: 599px) {
  .tg-hero-eyebrow {
    --tg-hero-eyebrow-size: 13px;
  }
}

.center-call-strip {
  background: var(--tg-orange, #e59536);
  color: #fff;
  position: relative;
  z-index: 5;
}

.center-call-strip__inner {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 9px 24px;
}

.center-call-strip__label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.center-call-strip__phone {
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
}

.center-call-strip__phone:hover {
  color: #fff;
  text-decoration: none;
}

.center-call-strip__tagline {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin-left: auto;
}

/* Floating WhatsApp button: 60px with a 36px drawing, 28px from the corner and
   14px on a phone. The icon's path leaves a margin inside its own box, so the
   box is 44px for the drawing to measure 36px. */
.floating-whatsapp {
  align-items: center;
  background: #25d366;
  border-radius: 50%;
  bottom: 28px;
  box-shadow: 0 8px 24px rgba(7, 94, 84, 0.24);
  color: #fff;
  display: flex;
  height: 60px;
  justify-content: center;
  position: fixed;
  right: 28px;
  transition: opacity 160ms ease, transform 160ms ease;
  width: 60px;
  z-index: 34;
}

.floating-whatsapp svg {
  display: block;
  height: 44px;
  width: 44px;
}

@media (max-width: 480px) {
  .floating-whatsapp {
    bottom: 14px;
    right: 14px;
  }
}

.floating-whatsapp:hover {
  background: #20bf5a;
  color: #fff;
  text-decoration: none;
}

body.mobile-nav-open .floating-whatsapp {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

body.public-landing .hero-points li {
  background: rgba(15, 41, 75, 0.72);
  border-color: rgba(255, 255, 255, 0.52);
  font-weight: 650;
}

body.public-landing .button.whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #062b18;
}

body.public-landing .button.whatsapp:hover {
  background: #1fbd5a;
  border-color: #1fbd5a;
  color: #062b18;
}

@media (max-width: 720px) {
  .center-call-strip__inner {
    justify-content: center;
    padding: 8px 18px;
  }

  .center-call-strip__tagline {
    display: none;
  }

}

/* ---- Nav auth state ---- */
.nav-staff-sep {
  border-left: 1px solid var(--border, #d9ddd6);
  display: inline-block;
  height: 18px;
  vertical-align: middle;
}

nav .nav-staff-link {
  font-size: 12px;
  opacity: 0.6;
}

nav .nav-staff-link:hover {
  opacity: 1;
}

/* ---- Shared public footer (TG Footer full · navy-deep) ---- */
.pub-footer {
  background: var(--tg-navy-deep, #0a1d36);
  color: #fff;
  padding: 44px 0 26px;
}

.pub-footer-inner {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px;
}

.pub-footer-grid {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 32px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding-bottom: 28px;
}

.pub-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pub-footer-claim {
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
}

.pub-footer-claim span {
  color: var(--tg-orange, #e59536);
}

.pub-footer-social {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.pub-footer h4 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.pub-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pub-footer-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 400;
}

.pub-footer-links a:hover {
  color: #fff;
  text-decoration: none;
}

/* A center's own address can be long: let it wrap inside its column. */
.pub-footer-email {
  overflow-wrap: anywhere;
}

.pub-footer-bottom a {
  color: rgba(255, 255, 255, 0.64);
}

.pub-footer-bottom a:hover {
  color: #fff;
}

.pub-footer-logo {
  align-self: flex-start;
  display: block;
  height: auto;
  width: 170px;
}

.pub-social-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  transition: background 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
  width: 34px;
}

.pub-social-icon:hover {
  background: rgba(255, 255, 255, 0.22);
  text-decoration: none;
}

.pub-social-icon--placeholder {
  cursor: default;
}

.pub-social-icon--placeholder:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pub-social-icon:focus-visible {
  outline: 2px solid var(--tg-orange, #e59536);
  outline-offset: 3px;
}

.pub-social-icon--whatsapp {
  background: rgba(37, 211, 102, 0.2);
  color: #25d366;
}

.pub-social-icon--whatsapp:hover {
  background: rgba(37, 211, 102, 0.28);
  color: #25d366;
}

.pub-social-icon svg {
  height: 16px;
  width: 16px;
}

.pub-footer-bottom {
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 16px;
  justify-content: space-between;
  padding-top: 18px;
}

.pub-footer-bottom-right {
  align-items: center;
  display: inline-flex;
  gap: 14px;
}

.pub-footer-mobile {
  display: none;
  text-align: left;
}

.pub-footer-mobile-logo {
  display: block;
  height: auto;
  margin-bottom: 18px;
  width: 140px;
}

.pub-footer-mobile-links {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  margin-left: 0;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.pub-footer-mobile-links a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

body.public-landing .pub-footer-mobile-links,
body.floorplan-page .pub-footer-mobile-links {
  align-items: flex-start;
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-left: 0;
  width: 100%;
}

body.public-landing .pub-footer-mobile-links a,
body.floorplan-page .pub-footer-mobile-links a {
  font-weight: 500;
}

.pub-footer-mobile-links a:hover,
.pub-footer-mobile-links a:focus-visible {
  color: #fff;
}

.pub-footer-mobile-legal {
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  padding-top: 16px;
  text-align: left;
}

.pub-footer-mobile-legal a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.pub-footer-mobile-legal a:hover,
.pub-footer-mobile-legal a:focus-visible {
  color: rgba(255, 255, 255, 0.82);
}

.pub-footer-mobile-copy {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  margin-top: 16px;
}

/* ---- Center search (landing) ---- */
.center-search-box {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 6px;
  display: flex;
  margin-bottom: 24px;
  padding: 5px 14px;
  transition: border-color 160ms ease;
  width: 340px;
}

.center-search-box:focus-within {
  border-color: var(--tg-navy, #0f294b);
}

.center-search-icon {
  color: var(--tg-muted, #657386);
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.center-search-input {
  background: none;
  border: none;
  color: var(--tg-ink, #0b0b0b);
  flex: 1;
  font: inherit;
  font-size: 14px;
  min-height: 34px;
  min-width: 0;
  outline: none;
  padding: 0 10px;
}

.center-search-input::placeholder {
  color: var(--tg-muted, #657386);
}

.center-no-results {
  color: var(--muted, #626970);
  display: none;
  font-size: 15px;
  padding: 18px 0;
}

.center-summary .contact-photo {
  aspect-ratio: 16 / 10;
}

.center-summary .size-list {
  color: var(--text, #1f252b);
  font-weight: 650;
}

.faq-item {
  padding: 0;
}

.faq-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: 800;
  justify-content: space-between;
  list-style: none;
  padding: 18px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  color: var(--primary, #0f294b);
  content: "+";
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-left: 16px;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  border-top: 1px solid var(--border, #d9ddd6);
  padding: 14px 18px 18px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pub-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px) {
  .pub-footer {
    padding: 30px 0 34px;
  }

  .pub-footer-inner {
    padding: 0 20px;
  }

  .pub-footer-grid {
    display: none;
  }

  .pub-footer-bottom {
    display: none;
  }

  .pub-footer-mobile {
    display: block;
  }
}

/* ============================================================
   F1 premium landing (design handoff: Landing 2a / móvil 3a)
   ============================================================ */

/* ---- Hero ---- */
.lp-hero {
  background: var(--tg-navy, #0f294b);
  isolation: isolate;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}

.lp-hero-photo {
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  z-index: 0;
}

.lp-hero-scrim {
  --lp-hero-navy: linear-gradient(90deg,
    #0f294b 0%,
    #0f294b 32%,
    rgba(15, 41, 75, 0.88) 43%,
    rgba(15, 41, 75, 0.22) 62%,
    rgba(15, 41, 75, 0.05) 100%);
  background: var(--lp-hero-navy);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* The warm glow of the «Para tu centro» hero, as faint as there. The scrim's
   own gradient masks it, so it shows only on the navy and never tints the
   photo; its box is as tall as that hero in each layout (two columns here,
   stacked below), which puts the light at the same distance from the top. A
   phone shows the photo edge to edge and has no glow. */
.lp-hero-scrim::before {
  background: var(--tg-hero-glow);
  content: "";
  height: 700px;
  inset: 0 0 auto;
  -webkit-mask-image: var(--lp-hero-navy);
  mask-image: var(--lp-hero-navy);
  position: absolute;
}

@media (max-width: 1021px) {
  .lp-hero-scrim::before {
    height: 1400px;
  }
}

.lp-hero-content {
  margin: 0 auto;
  max-width: 1180px;
  padding: 64px 24px 76px;
  position: relative;
  z-index: 2;
}

/* Motto, then the two statements. The motto sits 28px above the headline, as in
   the «Para tu centro» hero, and keeps to one line that ends, like the
   headline, where the scrim still covers the photo: where its shared size does
   not fit it shrinks a little (it is 27.85 times its font size wide). */
.lp-hero-content .tg-hero-eyebrow {
  font-size: min(var(--tg-hero-eyebrow-size), calc((52vw - 24px) / 28.1));
  white-space: nowrap;
}

.lp-hero-title {
  color: #fff;
  font-size: clamp(36px, calc(5vw - 2.5px), 56px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 28px 0 22px;
}

.lp-hero-title-line,
.lp-hero-title-break {
  display: block;
}

.lp-hero-title-line {
  white-space: nowrap;
}

.lp-hero-title-line + .lp-hero-title-line {
  margin-top: 0.7em;
}

.lp-hero-accent {
  color: var(--tg-orange, #e59536);
}

.lp-hero-mark {
  background: var(--tg-orange, #e59536);
  border-radius: 2px;
  display: block;
  height: 4px;
  margin: 0 0 44px;
  width: 72px;
}

.lp-picker {
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(11, 24, 43, 0.28);
  display: flex;
  gap: 12px;
  max-width: 560px;
  padding: 16px;
}

.lp-picker-field {
  flex: 1;
  min-width: 0;
}

.lp-picker-label {
  color: var(--tg-muted, #657386);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.lp-picker-select {
  appearance: none;
  -webkit-appearance: none;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23657386' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    right 14px center / 18px 18px no-repeat #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 6px;
  color: var(--tg-navy, #0f294b);
  font: 600 15px/1 'Montserrat', 'Montserrat Fallback', sans-serif;
  height: 52px;
  min-height: 52px;
  padding: 0 40px 0 14px;
  width: 100%;
}

.lp-picker-select:focus {
  border-color: var(--tg-navy, #0f294b);
  outline: none;
}

.lp-picker-cta {
  flex: 0 0 auto;
}

.lp-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.lp-hero-pills span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
}

/* ---- Brand trust bar (overlapping hero) ---- */
.lp-trustbar-wrap {
  margin: -32px auto 0;
  max-width: 1180px;
  padding: 0 24px;
  position: relative;
  z-index: 3;
}

.lp-trustbar {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 41, 75, 0.12);
  display: flex;
}

.lp-trustbar-item {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 14px;
  padding: 20px 24px;
}

.lp-trustbar-item + .lp-trustbar-item {
  border-left: 1px solid var(--tg-line, #d8e0e8);
}

.lp-trustbar-item:last-child {
  padding-right: 96px;
}

.lp-trustbar-item svg {
  color: var(--tg-navy, #0f294b);
  flex: 0 0 26px;
  height: 26px;
  width: 26px;
}

.lp-trustbar-item svg.lp-icon-whatsapp {
  color: #25d366;
  fill: #25d366;
}

.lp-trustbar-item strong {
  color: var(--tg-ink, #0b0b0b);
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-trustbar-item small {
  color: var(--tg-muted, #657386);
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

/* ---- Sections ---- */
.lp-section {
  margin: 0 auto;
  max-width: 1180px;
  padding: 56px 24px;
}

.lp-band {
  background: #f7f9fb;
}

.lp-band .lp-section {
  background: transparent;
}

.lp-h2 {
  color: var(--tg-navy, #0f294b);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.lp-section-head {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* ---- Center cards ---- */
.lp-center-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The cards sit in a track the grid sees through. Past three cards, and always
   on phones (below), it is a native scroll-snap carousel in which the next card
   peeks in: no autoplay and no JS. */
.lp-center-track {
  display: contents;
}

.lp-center-grid--carousel > .lp-center-track {
  display: flex;
  gap: 20px;
  grid-column: 1 / -1;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
  /* Browsers leave a partly visible link unscrolled on focus; reserving the
     peek strip makes keyboard focus bring the peeking card fully into view. */
  scroll-padding-inline-end: 120px;
  scroll-snap-type: x mandatory;
}

.lp-center-grid--carousel > .lp-center-track > .lp-center-card {
  flex: 0 0 calc((100% - 60px) / 3.25);
  scroll-snap-align: start;
}

.lp-center-card {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 41, 75, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lp-center-card-media {
  height: 170px;
  position: relative;
}

.lp-center-card-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lp-center-card-badge {
  background: #fff;
  border-radius: 999px;
  color: #2f855a;
  font-size: 11px;
  font-weight: 700;
  left: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 6px 11px;
  position: absolute;
  text-transform: uppercase;
  top: 12px;
}

/* Card without a photo of its own: the same badge sits at the top of the body. */
.lp-center-card-badge--inline {
  align-self: flex-start;
  border: 1px solid var(--tg-line, #d8e0e8);
  margin-bottom: 10px;
  position: static;
}

.lp-center-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.lp-center-card-body h3 {
  color: var(--tg-navy, #0f294b);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 3px;
}

.lp-center-card-address {
  color: var(--tg-muted, #657386);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.lp-center-card-price {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.lp-center-card-price strong {
  color: var(--tg-navy, #0f294b);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.lp-center-card-price span {
  color: var(--tg-muted, #657386);
  font-size: 14px;
  font-weight: 600;
}

.lp-center-card-price--none {
  color: var(--tg-muted, #657386);
  font-size: 15px;
  font-weight: 600;
}

.lp-center-card-meta {
  color: var(--tg-muted, #657386);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 16px;
}

.lp-center-card-cta {
  height: 46px;
  margin-top: auto;
  width: 100%;
}

.lp-center-card-badge--upcoming {
  color: var(--tg-orange-ink, #c97616);
}
.lp-center-card-map {
  color: var(--tg-navy, #0f294b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-center-card-map:hover {
  color: var(--tg-orange-ink, #c97616);
}
.lp-center-card-body .lp-opening-detail {
  margin: 0 0 2px;
}
/* Announced openings: the last item of the centres grid. It takes what is left
   of the cards' row (the track's last card gives the count) and a whole row when
   that row is full, below a carousel, or where :has() is unsupported. */
.lp-openings {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 41, 75, 0.06);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  padding: 24px;
}
.lp-center-grid:not(.lp-center-grid--carousel):has(> .lp-center-track > :last-child:nth-child(3n + 1)) > .lp-openings {
  grid-column: span 2;
}
.lp-center-grid:not(.lp-center-grid--carousel):has(> .lp-center-track > :last-child:nth-child(3n + 2)) > .lp-openings {
  grid-column: span 1;
}
.lp-openings h3 {
  color: var(--tg-navy, #0f294b);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 6px 0 4px;
}
.lp-openings-intro {
  color: var(--tg-muted, #657386);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.lp-openings-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-opening {
  align-items: center;
  border-top: 1px solid var(--tg-line, #d8e0e8);
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  padding: 12px 0;
}
.lp-opening:last-child {
  padding-bottom: 0;
}
.lp-opening-place {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-opening-place strong {
  color: var(--tg-navy, #0f294b);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.lp-opening-detail {
  color: var(--tg-navy, #0f294b);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.lp-opening-place small {
  color: var(--tg-muted, #657386);
  font-size: 13px;
  line-height: 1.4;
}
.lp-opening-cta {
  height: 46px;
  min-width: 150px;
}
/* In a one-column panel the button takes the row under its city. */
@container (max-width: 420px) {
  .lp-opening-cta {
    width: 100%;
  }
}

/* ---- Steps ---- */
.lp-steps-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-step-card {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 41, 75, 0.06);
  padding: 22px;
}

/* A step with a scene on top (home, «En 3 pasos»). */
.lp-step-card--scene {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.lp-step-body {
  padding: 20px 22px 22px;
}

/* One 4:3 scene per step, the same shape on every device. */
.lp-step-media {
  aspect-ratio: 4 / 3;
  background: var(--tg-surface, #f7f9fb);
  border-bottom: 1px solid var(--tg-line, #d8e0e8);
  overflow: hidden;
  position: relative;
}

.lp-step-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lp-step-chip {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11, 31, 56, 0.16);
  color: var(--tg-navy, #0f294b);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 6px;
  left: 12px;
  line-height: 1;
  padding: 8px 12px;
  position: absolute;
  top: 12px;
  white-space: nowrap;
}

.lp-step-chip b {
  font-weight: 700;
}

.lp-step-chip-dot {
  border-radius: 50%;
  flex: 0 0 8px;
  height: 8px;
}

.lp-step-chip-dot--chosen {
  background: var(--tg-plan-selected-fill, #e59536);
}

.lp-step-chip-dot--ok {
  background: #2f855a;
}

/* Step 1: the plan fills the scene and fades towards the rest of the centre. */
.lp-step-media--plan {
  background: var(--tg-plan-circulation, #f7f9fb);
}

.lp-step-plan {
  height: 100%;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 18%), linear-gradient(to bottom, transparent 6%, #000 30%);
  mask-image: linear-gradient(to left, transparent, #000 18%), linear-gradient(to bottom, transparent 6%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Step 2: the contracting screen (checkout_form.html), in miniature. */
.lp-step-media--sign {
  background: #eef1f4;
  padding: 16px 16px 0;
}

.lp-step-checkout {
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px 0;
}

.lp-step-checkout-steps {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.lp-step-checkout-step {
  align-items: center;
  color: var(--tg-muted, #657386);
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  font-weight: 600;
  gap: 5px;
  white-space: nowrap;
}

.lp-step-checkout-step b {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 50%;
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.lp-step-checkout-step.is-active {
  color: var(--tg-navy, #0f294b);
}

.lp-step-checkout-step.is-active b {
  background: var(--tg-navy, #0f294b);
  border-color: var(--tg-navy, #0f294b);
  color: #fff;
}

.lp-step-checkout-line {
  background: var(--tg-line, #d8e0e8);
  border-radius: 2px;
  flex: 1 1 auto;
  height: 2px;
  margin-bottom: 16px;
}

.lp-step-checkout-title {
  color: var(--tg-navy, #0f294b);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-step-checkout-label {
  color: var(--tg-navy, #0f294b);
  font-size: 12.5px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.lp-step-checkout-pad {
  align-items: center;
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 8px;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  margin-bottom: 14px;
  min-height: 0;
}

.lp-step-checkout-pad svg {
  height: auto;
  width: 46%;
}

/* ---- Plan vignette: a band of the real Sanlúcar floorplan, with the same
   --tg-plan-* tokens and states as the real plan (shared with /para-tu-centro/) ---- */
.tg-vignette {
  display: block;
  width: 100%;
}

.tg-vignette__room {
  fill: var(--tg-plan-occupied-fill);
  stroke: var(--tg-plan-occupied-stroke);
  stroke-linejoin: round;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.tg-vignette__room.is-free {
  fill: var(--tg-plan-available-fill);
  stroke: var(--tg-plan-available-stroke);
  stroke-width: 1.5px;
}

.tg-vignette__room.is-private {
  fill: var(--tg-plan-maintenance-fill);
  stroke: none;
}

.tg-vignette__room.is-chosen {
  fill: var(--tg-plan-selected-fill);
  stroke: var(--tg-plan-selected-halo);
  stroke-width: 3px;
}

.tg-vignette__label {
  dominant-baseline: central;
  fill: var(--tg-plan-occupied-text);
  font-size: 29px;
  font-weight: 700;
  text-anchor: middle;
}

.tg-vignette__label.is-free {
  fill: var(--tg-plan-available-text);
}

.tg-vignette__label.is-chosen {
  fill: var(--tg-plan-selected-text);
}

.tg-vignette__wall {
  fill: var(--tg-plan-wall);
  fill-rule: evenodd;
}

.tg-vignette__door {
  fill: none;
  stroke: var(--tg-plan-door);
  stroke-linecap: round;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.lp-step-card-num {
  align-items: center;
  background: var(--tg-orange, #e59536);
  border-radius: 7px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  margin-bottom: 12px;
  width: 28px;
}

.lp-step-card h3 {
  color: var(--tg-navy, #0f294b);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
}

.lp-step-card p {
  color: var(--tg-muted, #657386);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ---- Solutions: a navy band with a photo opens the section, then one card
   per audience. The photo fades into the navy like the hero's. ---- */
.lp-solutions-lead {
  background: var(--tg-navy, #0f294b);
  border-radius: 10px;
  display: flex;
  isolation: isolate;
  margin-bottom: 20px;
  min-height: 240px;
  overflow: hidden;
  position: relative;
}

.lp-solutions-lead-copy {
  align-self: center;
  padding: 32px 40px;
  position: relative;
  z-index: 1;
}

.lp-solutions-lead .lp-h2 {
  color: #fff;
}

.lp-solutions-lead-photo {
  inset: 0 0 0 50%;
  position: absolute;
}

.lp-solutions-lead-photo::after {
  background: linear-gradient(90deg,
    #0f294b 0%,
    rgba(15, 41, 75, 0.92) 10%,
    rgba(15, 41, 75, 0.7) 24%,
    rgba(15, 41, 75, 0.35) 42%,
    rgba(15, 41, 75, 0) 62%);
  content: "";
  inset: 0;
  position: absolute;
}

.lp-solutions-lead-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  width: 100%;
}

.lp-solutions-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The walking customer stands in the upper half of a portrait photo. */
.lp-step-media--person img {
  object-position: center 38%;
}

.lp-step-card p + p {
  margin-top: 8px;
}

/* ---- Benefit icon (city pages) ---- */
.lp-why-item-icon {
  align-items: center;
  background: var(--tg-surface, #f7f9fb);
  border: 1px solid var(--tg-line, #d8e0e8);
  border-radius: 8px;
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.lp-why-item-icon svg {
  color: var(--tg-navy, #0f294b);
  height: 20px;
  width: 20px;
}

/* ---- B2B strip ---- */
.lp-b2b {
  background: var(--tg-navy, #0f294b);
}

.lp-b2b .lp-section {
  align-items: center;
  display: grid;
  gap: 40px;
  grid-template-columns: 1.2fr 1fr;
  padding-bottom: 52px;
  padding-top: 52px;
}

.lp-b2b h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 12px;
}

.lp-b2b p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 520px;
}

.lp-b2b-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-b2b-outline {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  height: 52px;
  justify-content: center;
  line-height: 1;
  padding: 0 26px;
  text-decoration: none;
  transition: all 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.lp-b2b-outline:hover,
.lp-b2b-outline:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.lp-b2b-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.lp-b2b--operators .lp-section {
  grid-template-columns: minmax(0, 620px);
  justify-content: start;
}

.lp-b2b--operators .tg-eyebrow {
  color: var(--tg-orange, #e59536);
}

.lp-b2b-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 18px;
}

.lp-b2b-stat strong {
  color: var(--tg-orange, #e59536);
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.lp-b2b-stat span {
  color: rgba(255, 255, 255, 0.82);
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- Landing responsive ---- */
@media (max-width: 900px) {
  .lp-trustbar {
    flex-wrap: wrap;
  }

  .lp-trustbar-item {
    flex: 1 1 45%;
  }

  .lp-trustbar-item + .lp-trustbar-item {
    border-left: 0;
  }

  .lp-center-grid,
  .lp-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-b2b .lp-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .lp-center-grid,
  .lp-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-center-grid:not(.lp-center-grid--carousel):has(> .lp-center-track > :last-child:nth-child(n)) > .lp-openings {
    grid-column: 1 / -1;
  }

  .lp-center-grid:not(.lp-center-grid--carousel):has(> .lp-center-track > :last-child:nth-child(2n + 1)) > .lp-openings {
    grid-column: span 1;
  }

  .lp-center-grid--carousel > .lp-center-track > .lp-center-card {
    flex-basis: calc((100% - 20px) / 2.25);
  }

  .lp-b2b .lp-section {
    grid-template-columns: 1fr;
  }
}

/* Steps with a scene: three across while each scene keeps a readable width,
   then one per row with the scene beside its text, and stacked on phones. */
@media (min-width: 860px) and (max-width: 1024px) {
  .lp-steps-grid--scenes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 859px) {
  .lp-steps-grid--scenes,
  .lp-solutions-grid {
    grid-template-columns: 1fr;
  }

  .lp-step-card--scene {
    flex-direction: row;
  }

  .lp-step-media {
    border-bottom: 0;
    border-right: 1px solid var(--tg-line, #d8e0e8);
    flex: 0 0 46%;
  }

  .lp-step-body {
    align-self: center;
  }
}

@media (max-width: 559px) {
  .lp-solutions-lead {
    flex-direction: column-reverse;
    min-height: 0;
  }

  .lp-solutions-lead-copy {
    align-self: auto;
    padding: 18px 20px 20px;
  }

  .lp-solutions-lead-photo {
    aspect-ratio: 1086 / 498;
    inset: auto;
    position: relative;
  }

  .lp-solutions-lead-photo::after {
    background: linear-gradient(0deg, #0f294b 0%, rgba(15, 41, 75, 0) 45%);
  }

  .lp-step-card--scene {
    flex-direction: column;
  }

  .lp-step-media {
    border-bottom: 1px solid var(--tg-line, #d8e0e8);
    border-right: 0;
    flex: none;
  }

  .lp-step-body {
    align-self: auto;
  }
}

@media (max-width: 720px) {
  /* The first screen is the header, the hero and the trust bar: the hero takes
     what the header (95px) and the part of the bar that hangs below it (87px
     with its margin) leave, so the next section starts under the fold. */
  .lp-hero {
    --lp-hero-min: calc(100svh - 182px);
    min-height: var(--lp-hero-min);
  }

  .lp-hero-photo {
    inset: 0;
    object-position: 58% center;
    opacity: 0.95;
    width: 100%;
  }

  .lp-hero-scrim {
    background: linear-gradient(180deg,
      rgba(15, 41, 75, 0.88) 0%,
      rgba(15, 41, 75, 0.58) 28%,
      rgba(15, 41, 75, 0.18) 60%,
      rgba(15, 41, 75, 0.42) 100%);
  }

  .lp-hero-scrim::before {
    content: none;
  }

  .lp-hero-content {
    display: flex;
    flex-direction: column;
    min-height: var(--lp-hero-min);
    padding: 44px 20px 42px;
  }

  /* The photo runs edge to edge here: the motto has the whole content width. */
  .lp-hero-content .tg-hero-eyebrow {
    font-size: min(var(--tg-hero-eyebrow-size), calc((100vw - 40px) / 28.1));
  }

  /* «Alquiler de trasteros» stays on one line down to a 320px phone. */
  .lp-hero-title {
    font-size: min(36px, calc((100vw - 40px) / 10.45));
    line-height: 1.03;
    margin-bottom: 20px;
  }

  .lp-hero-mark {
    margin-bottom: 22px;
    width: 60px;
  }

  .lp-picker {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .lp-picker-select {
    height: 48px;
    min-height: 48px;
  }

  .lp-picker-cta {
    height: 48px;
    width: 100%;
  }

  .lp-hero-pills {
    display: none;
  }

  /* Compact trust bar: the four promises, two per row, titles only. */
  .lp-trustbar-wrap {
    margin-top: -20px;
    padding: 0 20px;
  }

  .lp-trustbar-item {
    gap: clamp(6px, 2vw, 8px);
    padding: 12px clamp(8px, 2.4vw, 10px);
  }

  .lp-trustbar-item:last-child {
    padding-right: clamp(8px, 2.4vw, 10px);
  }

  /* The floating WhatsApp button rests on the bar's bottom-right corner at
     first sight, so the two short titles take the right column. */
  .lp-trustbar-item:nth-child(1) {
    order: 2;
  }

  .lp-trustbar-item:nth-child(2) {
    order: 1;
  }

  .lp-trustbar-item:nth-child(3) {
    order: 4;
  }

  .lp-trustbar-item:nth-child(4) {
    order: 3;
  }

  .lp-trustbar-item:nth-child(odd) {
    border-left: 1px solid var(--tg-line, #d8e0e8);
  }

  .lp-trustbar-item:nth-child(n + 3) {
    border-top: 1px solid var(--tg-line, #d8e0e8);
  }

  .lp-trustbar-item svg {
    flex-basis: clamp(18px, 5vw, 20px);
    height: clamp(18px, 5vw, 20px);
    width: clamp(18px, 5vw, 20px);
  }

  /* Each title keeps to one line down to a 320px phone, so the bar is two rows. */
  .lp-trustbar-item strong {
    font-size: min(13px, 3.1vw);
    white-space: nowrap;
  }

  .lp-trustbar-item small {
    display: none;
  }

  .lp-section {
    padding: 28px 18px;
  }

  .lp-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .center-search-box {
    display: none;
  }

  .lp-h2 {
    font-size: 24px;
  }

  .lp-center-grid,
  .lp-steps-grid {
    grid-template-columns: 1fr;
  }

  /* Phones: always the carousel, bleeding to the screen edges. */
  .lp-center-track,
  .lp-center-grid--carousel > .lp-center-track {
    display: flex;
    gap: 12px;
    margin: 0 -18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 18px 8px;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
  }

  .lp-center-track > .lp-center-card,
  .lp-center-grid--carousel > .lp-center-track > .lp-center-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .lp-center-track > .lp-center-card:only-child {
    flex-basis: 100%;
  }

  .lp-center-card-media {
    height: 150px;
  }

  .lp-openings {
    padding: 20px;
  }

  .lp-opening-cta {
    width: 100%;
  }

  .lp-b2b .lp-section {
    gap: 24px;
    padding-bottom: 32px;
    padding-top: 32px;
  }

  .lp-b2b h2 {
    font-size: 22px;
  }

  .lp-b2b--operators .lp-section {
    padding-bottom: 28px;
    padding-top: 28px;
  }

  .lp-b2b--operators p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .lp-b2b--operators .lp-b2b-actions .tg-btn-cta {
    height: 46px;
    padding: 0 18px;
    width: 100%;
  }

  .lp-b2b--operators .lp-b2b-outline {
    display: none;
  }

  .lp-b2b-actions .tg-btn-cta,
  .lp-b2b-outline {
    width: 100%;
  }
}

/* ============================================================
   City page (F2) - CityPage.pdf parity with backend data truth
   ============================================================ */

.cp-page {
  background: var(--tg-surface);
}

.cp-breadcrumb {
  font-size: 13px;
}

.cp-breadcrumb .lp-section {
  align-items: center;
  color: var(--tg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
  padding-top: 18px;
}

/* Breadcrumbs are <nav>s: these selectors must outrank base.css `body.public-landing nav a` (white topbar links). */
.cp-page nav.cp-breadcrumb a {
  color: var(--tg-navy);
  font-weight: 500;
}

.cp-page nav.cp-breadcrumb a:hover {
  color: var(--tg-orange-ink);
  text-decoration: none;
}

.cp-breadcrumb-current {
  color: var(--tg-navy);
  font-weight: 700;
}

.cp-hero-wrap {
  padding-bottom: 26px;
  padding-top: 18px;
}

.cp-hero {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 41, 75, 0.07);
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  overflow: hidden;
  padding: 40px;
}

.cp-hero-copy h1 {
  color: var(--tg-navy);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 16px;
}

.cp-hero-lead {
  color: var(--tg-muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 460px;
}

.cp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.cp-hero-checks {
  color: var(--tg-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-hero-checks li::before {
  color: var(--tg-orange-ink);
  content: "✓ ";
}

.cp-hero--no-media {
  grid-template-columns: 1fr;
}

.cp-hero-media {
  margin: 0;
  position: relative;
}

.cp-hero-media img {
  border-radius: 10px;
  display: block;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  width: 100%;
}

.cp-hero-media figcaption {
  background: rgba(10, 29, 54, 0.88);
  border-radius: 8px;
  bottom: 14px;
  color: var(--tg-white);
  display: grid;
  gap: 2px;
  left: 14px;
  padding: 10px 14px;
  position: absolute;
  right: 14px;
}

.cp-hero-media figcaption strong {
  font-size: 14px;
}

.cp-hero-media figcaption span {
  font-size: 12px;
  opacity: 0.85;
}

.cp-section-lead {
  color: var(--tg-muted);
  margin: 8px 0 26px;
  max-width: 560px;
}

.cp-center-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
}

.cp-center-card {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.cp-center-card-head h3 {
  color: var(--tg-navy);
  font-size: 19px;
  margin: 0 0 6px;
}

.cp-center-card-address {
  color: var(--tg-muted);
  font-size: 14px;
  margin: 0;
}

.cp-center-card-phone {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 0;
}

.cp-center-card-phone a {
  color: var(--tg-navy);
}

.cp-center-card-price {
  align-items: baseline;
  display: flex;
  gap: 4px;
}

.cp-center-card-price strong {
  color: var(--tg-orange-ink);
  font-size: 28px;
  font-weight: 800;
}

.cp-center-card-price span {
  color: var(--tg-muted);
  font-size: 14px;
  font-weight: 600;
}

.cp-center-card-price--none {
  color: var(--tg-muted);
  font-size: 15px;
  font-weight: 600;
}

.cp-center-card-meta {
  color: var(--tg-muted);
  display: grid;
  font-size: 14px;
  font-weight: 500;
  gap: 4px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.cp-center-card-meta li::before {
  color: var(--tg-orange-ink);
  content: "• ";
}

.cp-center-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-center-note {
  color: var(--tg-muted);
  font-size: 13px;
  margin: 18px 0 0;
}

.cp-benefit-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-benefit-card {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 10px;
  padding: 22px 20px;
}

.cp-benefit-card h3 {
  color: var(--tg-navy);
  font-size: 16px;
  margin: 14px 0 8px;
}

.cp-benefit-card p {
  color: var(--tg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.cp-zones {
  background: var(--tg-navy);
  color: var(--tg-white);
}

.cp-zones h2 {
  color: var(--tg-white);
  font-size: 30px;
  line-height: 1.12;
  margin: 0 0 12px;
}

.cp-zones-lead {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
  max-width: 520px;
}

.cp-zone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-zone-chips li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
}

.cp-zone-chips--centered {
  justify-content: center;
  margin-bottom: 24px;
}

.cp-faq-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-faq-grid .faq-item {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 10px;
  padding: 4px 16px;
}

.cp-final-cta {
  background: var(--tg-navy-deep);
  color: var(--tg-white);
  text-align: center;
}

.cp-final-cta h2 {
  color: var(--tg-white);
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 12px;
}

.cp-final-cta p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 24px;
  max-width: 480px;
}

.cp-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.cp-final-cta-ghost {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: var(--tg-white);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  height: 48px;
  justify-content: center;
  padding: 0 22px;
  transition: all 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.cp-final-cta-ghost:hover,
.cp-final-cta-ghost:focus-visible {
  border-color: var(--tg-white);
  color: var(--tg-white);
  text-decoration: none;
}

@media (max-width: 900px) {
  .cp-hero {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .cp-hero-copy h1 {
    font-size: 30px;
  }

  .cp-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cp-hero-media img {
    min-height: 220px;
  }

  .cp-hero-actions .tg-btn-cta,
  .cp-hero-actions .tg-btn-ghost {
    flex: 1 1 100%;
  }

  .cp-benefit-grid {
    grid-template-columns: 1fr;
  }

  .cp-center-grid {
    grid-template-columns: 1fr;
  }

  .cp-final-cta h2 {
    font-size: 26px;
  }

  .cp-final-cta-actions .tg-btn-cta,
  .cp-final-cta-actions .cp-final-cta-ghost {
    width: 100%;
  }
}

/* ============================================================
   Company/legal pages (F7) - Empresa y Legal.pdf layout
   Content stays placeholder-labeled and noindex until legal review.
   ============================================================ */

.lg-head {
  background: var(--tg-surface);
  border-bottom: 1px solid var(--tg-line);
}

.lg-head .lp-section {
  padding-bottom: 30px;
  padding-top: 24px;
}

.lg-head h1 {
  color: var(--tg-navy);
  font-size: 34px;
  line-height: 1.1;
  margin: 10px 0 8px;
}

.lg-head p {
  color: var(--tg-muted);
  margin: 0;
  max-width: 560px;
}

.lg-breadcrumb {
  align-items: center;
  color: var(--tg-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
}

/* Breadcrumbs are <nav>s: these selectors must outrank base.css `body.public-landing nav a` (white topbar links). */
.lg-head nav.lg-breadcrumb a {
  color: var(--tg-navy);
  font-weight: 500;
}

.lg-head nav.lg-breadcrumb a:hover {
  color: var(--tg-orange-ink);
  text-decoration: none;
}

.lg-breadcrumb .lg-breadcrumb-current {
  color: var(--tg-navy);
  font-weight: 700;
}

.lg-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 260px minmax(0, 1fr);
}

.lg-sidebar {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  padding: 18px;
  position: sticky;
  top: 96px;
}

.lg-sidebar-label {
  color: var(--tg-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.lg-sidebar nav {
  display: grid;
  gap: 2px;
}

.lg-sidebar nav a {
  border-radius: 8px;
  color: var(--tg-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  padding: 10px 12px;
  transition: background 160ms cubic-bezier(0.2, 0.6, 0.2, 1), color 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.lg-sidebar nav a::before {
  background: #cfd8e3;
  border-radius: 50%;
  content: "";
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.lg-sidebar nav a:hover,
.lg-sidebar nav a:focus-visible {
  background: var(--tg-surface);
  color: var(--tg-navy);
  outline: 2px solid rgba(15, 41, 75, 0.16);
  outline-offset: 2px;
  text-decoration: none;
}

.lg-sidebar nav a.is-active {
  background: var(--tg-navy);
  color: #fff;
}

.lg-sidebar nav a.is-active::before {
  background: var(--tg-orange);
}

.lg-sidebar nav a.is-active:hover,
.lg-sidebar nav a.is-active:focus-visible {
  background: var(--tg-navy-deep);
  color: #fff;
  outline-color: rgba(229, 149, 54, 0.55);
}

.lg-sidebar-contact {
  border-top: 1px solid var(--tg-line);
  margin-top: 14px;
  padding-top: 14px;
}

.lg-sidebar-contact small {
  color: var(--tg-muted);
  display: block;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.lg-sidebar-contact a {
  color: var(--tg-navy);
  font-size: 16px;
  font-weight: 700;
}

.lg-content {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  padding: 28px 30px;
}

.lg-content h1,
.lg-content h2 {
  color: var(--tg-navy);
  margin-top: 0;
}

.lg-placeholder-note {
  align-items: flex-start;
  background: #fdf6ec;
  border: 1px solid #f0d5ab;
  border-radius: 8px;
  color: var(--tg-orange-ink);
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 10px;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 11px 14px;
}

.lg-content ul {
  color: var(--tg-muted);
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-left: 20px;
}

.lg-content li::marker {
  color: var(--tg-orange-ink);
}

.lg-body {
  color: var(--tg-muted);
  font-size: 15px;
  line-height: 1.65;
}

.contact-content {
  display: grid;
  gap: 18px;
}

.contact-form-card,
.contact-info-card {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(10, 29, 54, 0.06);
}

.contact-form-card {
  padding: 28px 30px;
}

.contact-form-heading h2,
.contact-info-card h2 {
  color: var(--tg-navy);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.contact-form-heading p {
  color: var(--tg-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.contact-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field {
  display: grid;
  gap: 7px;
}

.contact-field--wide {
  grid-column: 1 / -1;
}

.contact-field label,
.contact-privacy-check {
  color: var(--tg-navy);
  font-size: 13px;
  font-weight: 700;
}

/* base.css loads after this file: the :not() lifts text fields above its
   input[type] rule so every contact field shares the 48 px height. */
.contact-form-grid input:not([type="checkbox"]):not([type="radio"]),
.contact-form-grid select,
.contact-form-grid textarea {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: 8px;
  color: var(--tg-ink);
  font: inherit;
  min-height: 48px;
  padding: 12px 13px;
  width: 100%;
}

.contact-form-grid input:focus,
.contact-form-grid select:focus,
.contact-form-grid textarea:focus {
  border-color: var(--tg-navy);
  box-shadow: 0 0 0 3px rgba(15, 41, 75, 0.12);
  outline: 0;
}

.contact-form-grid textarea {
  min-height: 128px;
  resize: vertical;
}

.contact-privacy-check {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  line-height: 1.45;
  margin: 18px 0 20px;
}

.contact-privacy-check input {
  accent-color: var(--tg-navy);
  flex: 0 0 auto;
  margin-top: 2px;
}

.contact-form-card .contact-privacy-check a {
  color: var(--tg-orange-ink);
  font-weight: 700;
}

.contact-info-card a {
  color: var(--tg-navy);
  font-weight: 700;
}

.contact-field-error {
  color: var(--danger, #b42318);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.contact-field-error:empty {
  display: none;
}

.contact-privacy-error {
  display: block;
  margin: -12px 0 16px;
}

.contact-send-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-send-actions .contact-send {
  flex: 1 1 200px;
  font-size: 15px;
  height: 52px;
}

.contact-form-status {
  color: var(--tg-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0 0;
}

.contact-form-status:empty {
  display: none;
}

.contact-form-status a {
  color: var(--tg-orange-ink);
  font-weight: 700;
}

.contact-info-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-info-card {
  padding: 22px;
}

.contact-info-card .tg-eyebrow {
  margin-bottom: 16px;
}

.contact-info-card dl {
  display: grid;
  gap: 16px;
  margin: 0;
}

.contact-info-card dt {
  color: var(--tg-muted);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.contact-info-card dd,
.contact-info-card p {
  color: var(--tg-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.contact-info-card dd a {
  font-size: 16px;
}

.contact-access-pill {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 999px;
  color: var(--tg-navy);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  margin-top: 18px;
  padding: 9px 12px;
}

.contact-info-card .contact-center-link {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .lg-layout {
    grid-template-columns: 1fr;
  }

  .lg-sidebar {
    position: static;
  }

  .lg-head h1 {
    font-size: 26px;
  }

  .contact-info-grid,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 22px;
  }
}

/* Content <nav> elements must not inherit the topbar nav flex rules that
   base.html applies to `body.public-landing nav` at mobile widths. */
.cp-page nav.cp-breadcrumb,
.lg-head nav.lg-breadcrumb,
.lg-layout .lg-sidebar nav {
  flex: none;
  justify-content: flex-start;
  margin-left: 0;
  width: 100%;
}

.cp-page nav.cp-breadcrumb {
  display: block;
}

.lg-head nav.lg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
}

.lg-layout .lg-sidebar nav {
  display: grid;
  gap: 2px;
}

.lg-layout .lg-sidebar nav {
  grid-template-columns: minmax(0, 1fr);
}

.lg-layout .lg-sidebar nav a:not(.is-active) {
  color: var(--tg-muted);
}

.lg-layout .lg-sidebar nav a:not(.is-active):hover,
.lg-layout .lg-sidebar nav a:not(.is-active):focus-visible {
  color: var(--tg-navy);
}