/* ==========================================================================
   EVA — Global styles
   Desktop-first. Tablet/mobile overrides live at the end of each section,
   using the breakpoint tokens below once the responsive designs are ready.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* IBM Plex Mono is self-hosted from IBM's official release (@ibm/plex-mono
   1.1.0, SIL OFL, see assets/fonts/IBM-Plex-LICENSE.txt): the Google Fonts
   build drops the slashed-zero glyph used by `font-variant-numeric: slashed-zero`.
   Instrument Sans and STIX Two Text still come from Google Fonts. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --color-ink:        #0f1010;  /* primary text */
  --color-dark:       #1d2729;  /* top bar, dark buttons */
  --color-accent:     #1fbad0;  /* brand cyan */
  --color-muted:      #828181;  /* eyebrows / secondary labels */
  --color-heading:    #1f1f1f;  /* card titles */
  --color-body:       #3d3c3c;  /* card descriptions */
  --color-placeholder:#c2c2c2;  /* image background while loading */
  --color-border:     #c2c2c2;  /* card & tab borders */
  --color-cream:      #f8f6f2;  /* pricing section background */
  --color-yellow:     #fce00e;  /* plan badges */
  --color-text:       #313131;  /* plan copy */
  --color-text-2:     #4a4a4a;  /* annual price */
  --color-note:       #727272;  /* footnotes */
  --color-faded:      #a2a2a2;  /* closed FAQ questions & dividers */
  --color-accent-tint: rgba(31, 186, 208, 0.1); /* featured plan background */
  --color-white:      #ffffff;
  --color-success:    #1f7a4d;  /* contact form "sent" message */
  --color-error:      #c0392b;  /* form errors */

  /* Fonts */
  --font-display: "STIX Two Text", Georgia, serif;          /* logo */
  --font-sans:    "Instrument Sans", system-ui, sans-serif; /* body & headings */
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace; /* labels & buttons */

  /* Layout */
  --container-max: 1440px;
  --gutter:        72px;

  /* Breakpoints (reference only — CSS vars can't be used in media queries).
     Tablet: max-width 1023px (design frame 834px). Mobile: still to come.
     --bp-tablet: 1023px;  --bp-mobile: 767px; */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* scroll strips bleed to the screen edge (100vw) without a sideways page scroll */
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.text-accent { color: var(--color-accent); }

/* Carousel dots ([data-carousel], driven by js/main.js). Hidden by default;
   each section shows them at the breakpoint where it becomes a carousel. */
.carousel-dots { display: none; justify-content: center; gap: 16px; }
.carousel-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color .2s ease;
}
.carousel-dot::after { content: ""; position: absolute; inset: -8px; }  /* larger tap target */
.carousel-dot[aria-current="true"] { background: var(--color-heading); }

.eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  color: var(--color-muted);
}

/* Material Symbols (Outlined, filled variant via FILL axis) */
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-block;
  flex-shrink: 0;
  user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.icon--light { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.btn--accent { background: var(--color-accent); }
.btn--accent:hover { background: #1aa6ba; }
.btn--dark { background: var(--color-dark); }
.btn--dark:hover { background: #2c3a3d; }
.btn--block { display: flex; width: 100%; }

.btn__icon { font-size: 20px; transition: transform .2s ease; }
.btn:hover .btn__icon { transform: translateX(3px); }


/* ==========================================================================
   HEADER — top contact bar + main navigation
   ========================================================================== */
.topbar {
  background: var(--color-dark);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: 32px;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
  color: var(--color-white);
  white-space: nowrap;
}
.topbar__item:hover { color: var(--color-accent); }
.topbar__icon { font-size: 16px; }
.topbar__icon--sm { font-size: 14px; }

.navbar {
  height: 81px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
}
.navbar__left {
  display: flex;
  align-items: center;
  gap: 42px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46.67px;
  line-height: 30px;
  letter-spacing: -1.4px;
  width: 72px;
  color: var(--color-ink);
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: 42px;
}
.navbar__links a {
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  white-space: nowrap;
  transition: color .2s ease;
}
.navbar__links a:hover { color: var(--color-accent); }

.navbar__cta {
  width: 199px;
  height: 52px;
  padding: 10px 0 10px 10px;  /* matches design (left padding only) */
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
}
.navbar__actions { display: flex; align-items: center; gap: 20px; }

/* Phone menu: hamburger + panel (hidden above the phone breakpoint) */
.site-header { position: relative; z-index: 10; }
.navbar__toggle { display: none; }
.mobile-menu { display: none; }


/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 655px;
  overflow: hidden;
  display: flex;
  align-items: center;     /* card centered on the photo's vertical axis (owner request) */
}

/* Photo crop from the design: 105.28% wide, 151.79% tall,
   anchored right, -29.62% top. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__img {
  position: absolute;
  right: 0;
  top: -29.62%;
  width: 105.28%;
  height: 151.79%;
  max-width: none;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 24px;     /* minimum space above/below; the card is centered in the 655px hero */
}

.hero__card {
  width: 525px;
  max-width: 100%;
  background: var(--color-white);
  padding: 32px 48px;   /* 32px top/bottom (owner request; Figma 359:59 had 24) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* badge keeps its own width */
  gap: 16px;
}
.hero__content,
.hero__cta { align-self: stretch; }

/* "20 AÑOS DE SERVICIO" badge (Figma 486:544) */
.hero__badge {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border-radius: 2px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 12px;
  line-height: 27px;
  letter-spacing: 0.48px;
  white-space: nowrap;
  margin-bottom: 8px;   /* 16px card gap + 8 = 24px between the badge and the title (owner request) */
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero__title {
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.96px;
}
.hero__subtitle {
  font-size: 20px;
  line-height: 24px;
}

.hero__services {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 25px;
}

.hero__cta {
  height: 60px;
  padding: 10px;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
}

/* --- Hero: tablet / mobile overrides go here --- */

/* Tablet (design frame: 834px). Header drops the nav links;
   the hero photo keeps a fixed 951px crop anchored left. */
@media (max-width: 1023px) {
  .topbar__item {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  .navbar { padding-inline: 24px; }
  .navbar__links { display: none; }

  .hero { min-height: 590px; }
  .hero__img {
    left: -13px;
    right: auto;
    top: -13px;
    width: max(951px, calc(100% + 27px));
    height: auto;
    min-height: 634px;
  }

  .hero__inner {
    padding-inline: 29px;
    padding-block: 24px;
  }
  .hero__card {
    width: 437px;
    padding: 32px 24px;            /* same as desktop: 32px top/bottom, 16px gaps */
  }
  .hero__title {
    font-size: 32px;
    line-height: 39px;
    letter-spacing: -0.64px;
  }
  .hero__subtitle { font-size: 18px; }
  .service-list__item {
    align-items: flex-start;
    line-height: 20px;
  }
}

/* Phone (design frame: 390px). The top bar's contact details move into the
   hamburger menu; the CTA shrinks to a 52px arrow square. */
@media (max-width: 767px) {
  .topbar { display: none; }

  .navbar { padding: 0 20px 0 24px; }
  .navbar__cta { width: 52px; padding: 0; }
  .navbar__cta-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .navbar__toggle {
    position: relative;
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .navbar__toggle::after { content: ""; position: absolute; inset: 0 -10px; }  /* 44px tap target */
  .navbar__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-ink);
    transition: transform .2s ease, opacity .2s ease;
  }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) { opacity: 0; }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Open menu fills the screen below the header bar (white space at the
     bottom when the content is short); the page behind doesn't scroll */
  .mobile-menu:not([hidden]) {
    position: fixed;
    top: var(--mobile-menu-top, 81px);   /* set by js/main.js to the bar's bottom edge */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px 24px 32px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
  }
  html.has-open-menu { overflow: hidden; }
  .mobile-menu__links a {
    display: block;
    padding-block: 16px;
    border-bottom: 1px solid #ececec;
    font-weight: 500;
    font-size: 20px;
    line-height: 25px;
  }
  .mobile-menu__links a:hover { color: var(--color-accent); }
  .mobile-menu__contact { display: flex; flex-direction: column; gap: 12px; }
  .mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 1.2px;
    color: var(--color-dark);
  }
  .mobile-menu__contact-item .icon { font-size: 16px; }

  /* Hero: full-width photo, then the copy on white (no card) */
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero__media { position: relative; height: 308px; }
  .hero__img {
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .hero__inner { padding: 32px 24px; }   /* 32px above the badge and below the CTA, as on desktop */
  .hero__card { width: auto; padding: 0; }
  .hero__title { font-size: 38px; letter-spacing: -0.76px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .navbar__toggle-bar { transition: none; }
}


/* ==========================================================================
   SHARED — section heading
   ========================================================================== */
.section-title {
  font-weight: 400;
  font-size: 42px;
  line-height: 53px;
  letter-spacing: -0.84px;
  color: #000;
  text-wrap: balance;
}


/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 90px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 × 312px at 1440 */
  gap: 16px;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-card__media {
  position: relative;
  aspect-ratio: 312 / 371;
  overflow: hidden;
  background: var(--color-placeholder);
}
.service-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .5s ease;
}
/* Card 3 uses a custom crop in the design (photo zoomed and shifted left) */
.service-card__img--wide {
  inset: auto;
  left: -46.72%;
  top: -2.69%;
  width: 197.36%;
  height: 110.66%;
}
.service-card:hover .service-card__img { transform: scale(1.04); }

.price-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  height: 29px;
  width: 151px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  border-radius: 2px;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.48px;
  white-space: nowrap;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-card__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  color: var(--color-heading);
  transition: color .2s ease;
}
.service-card:hover .service-card__title { color: var(--color-accent); }
.service-card__text {
  max-width: 276px;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-body);
}

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

/* --- Services: tablet / mobile overrides go here --- */

/* Tablet: 2 × 312px columns, centered; photos 312 × 323.
   Measured from a PNG export (Figma MCP unavailable), so values are ±1px. */
@media (max-width: 1023px) {
  .services__grid {
    grid-template-columns: repeat(2, 312px);
    justify-content: center;
    gap: 32px 16px;
  }
  .service-card__media { aspect-ratio: 312 / 323; }
  .services .section-title {
    font-size: 38px;
    line-height: 52px;
    letter-spacing: -0.76px;
  }
}

/* Phone: the 4 cards become a horizontal scroll strip that starts at the
   24px gutter and bleeds to the right edge (same pattern as .hscroll__track) */
@media (max-width: 767px) {
  .services { padding-inline: 24px; overflow-x: clip; }
  /* Design's 38px can't fit "Servicios y Estructura" on one line;
     32px keeps it on line 1 with "para tu negocio" below (owner's choice) */
  .services .section-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
    text-wrap: wrap;
  }
  .services__grid {
    grid-template-columns: repeat(4, 312px);
    justify-content: start;
    gap: 16px;
    margin-right: calc((100% - 100vw) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .services__grid > li { scroll-snap-align: start; }
}


/* ==========================================================================
   PRICING — "Nuestros Precios"
   ========================================================================== */
.pricing { background: var(--color-cream); overflow-x: clip; }
/* .why is a max-width .container, so it must NOT clip: on screens wider than
   1440px that would cut its strip off at the container edge. body clips instead. */
.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 90px;
  padding-bottom: 45px;
}
.pricing__title { text-align: center; }
.pricing__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Tabs */
.pricing-tabs { display: flex; }
.pricing-tab {
  width: 251px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 10px;  /* matches design (left padding only) */
  border: 1px solid var(--color-border);
  margin-left: -1px;           /* collapse shared borders */
  background: var(--color-white);
  color: var(--color-dark);
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.pricing-tab:first-child { margin-left: 0; }
.pricing-tab:not([aria-selected="true"]):hover { background: #eef0f0; }
.pricing-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.pricing-panel { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pricing-panel[hidden] { display: none; }
.pricing-panel:focus { outline: none; }
.pricing-panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.pricing-pending {
  padding: 48px;
  text-align: center;
  color: var(--color-note);
  border: 1px dashed var(--color-border);
}

/* Plan cards: 3 equal columns + a 322px featured column.
   Row 1 holds the featured flag; every card sits in row 2 so all cards
   share top and bottom edges even when one has more content. */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 29px auto;
}
.plan { grid-row: 2; display: flex; flex-direction: column; }
.plan--featured { grid-row: 1 / 3; }
.plan__card {
  flex: 1;
  min-height: 814px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.plan:first-child .plan__card { border-right: 0; }
.plan:nth-child(n+3) .plan__card { border-left: 0; }

.plan--featured .plan__card {
  background: var(--color-accent-tint);
  border-color: var(--color-heading);
}
.plan__flag {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.48px;
}

.plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.plan__badge {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.48px;
  white-space: nowrap;
}
.plan__badge--yellow { background: var(--color-yellow); color: var(--color-text); }
.plan__badge--dark   { background: var(--color-dark);   color: var(--color-white); }
.plan__icon { font-size: 32px; color: var(--color-ink); }

.plan__intro { display: flex; flex-direction: column; gap: 8px; }
.plan__title {
  font-weight: 400;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: -0.64px;
  color: #000;
}
.plan__desc { font-size: 16px; line-height: 20px; color: var(--color-text); }

.plan__prices { display: flex; flex-direction: column; gap: 16px; }
.plan__price {
  font-size: 16px;
  line-height: 34px;
  letter-spacing: -0.48px;
  color: #000;
}
.plan__amount { font-size: 24px; }
.plan__price--year {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--color-text-2);
}
.plan__price--year .plan__amount { font-size: 20px; }
.plan__period {
  display: block;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-text);
}
.plan__price--year .plan__period { line-height: 17px; }

.plan__actions { display: flex; flex-direction: column; gap: 40px; }
.plan__cta {
  height: 42px;
  padding: 10px 0 10px 10px;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
}

.plan__features,
.plan__checks,
.pricing__notes { display: flex; flex-direction: column; gap: 8px; }

.plan__features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}
.plan__features .icon { font-size: 16px; width: 16px; }

.plan__checks li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-text);
}
.plan__checks .icon { font-size: 16px; line-height: 18px; }

.pricing__notes { gap: 0; }
.pricing__notes li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 24px;
  color: var(--color-note);
}
.pricing__notes .icon { font-size: 16px; }

/* Offer layout (Oficina Física tab): photo collage + details */
.offer {
  width: 100%;
  max-width: 1256px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-right: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.offer__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 374px 321px;
  gap: 25px 17px;
}
.offer__photo {
  position: relative;
  overflow: hidden;
  background: var(--color-placeholder);
}
.offer__photo--main { grid-column: 1 / -1; }
.offer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Main photo crop from the design */
.offer__img--main {
  inset: auto;
  left: -13.07%;
  top: -29.71%;
  width: 138.42%;
  height: 145.84%;
}

.offer__content {
  min-height: 762px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding-block: 40px;
}
.offer__info { display: flex; flex-direction: column; gap: 32px; }
.offer__summary { display: flex; flex-direction: column; gap: 24px; }
.offer__desc { max-width: 293px; font-size: 18px; line-height: 22px; color: var(--color-text); }

.offer__pricing { display: flex; flex-direction: column; gap: 16px; }
.offer__price {
  font-size: 16px;
  line-height: 34px;
  letter-spacing: -0.48px;
  color: #000;
}
.offer__from {
  display: block;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-text);
}
.offer__notes { display: flex; flex-direction: column; gap: 4px; }
.offer__notes li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-note);
}
.offer__notes li:first-child { line-height: 24px; align-items: center; }
.offer__notes .icon { font-size: 16px; line-height: 18px; }

.offer__lists { display: flex; flex-direction: column; gap: 32px; }
.offer__lists .plan__checks li { line-height: 24px; align-items: center; }

.offer__cta {
  height: 60px;
  padding: 10px 0 10px 10px;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
}

/* Packages layout (Paquetes de Horas tab): space sub-tabs + 3 package cards */
.packages { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }

.subtabs { display: flex; align-items: flex-start; gap: 24px; }
.subtab {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 53px;
  letter-spacing: -0.48px;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.subtab:hover { color: #000; }
.subtab[aria-selected="true"] { color: #000; border-bottom-color: var(--color-ink); }

.pricing-subpanel { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pricing-subpanel:focus { outline: none; }
.pricing-subpanel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans--3 .plan__card { min-height: 624px; }
.plan__badge--medium { font-weight: 500; }

.pack__price {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.48px;
  color: #000;
}
.pack__hourly {
  display: block;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-text);
}

/* Single package card (Oficina Ejecutiva) */
.pack-single {
  width: 392px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pack-single .plan__card { min-height: 590px; }
.plan__title-unit { font-size: 20px; letter-spacing: -0.4px; }

/* Rooms (Salas de Juntas tab): 5 cards wider than the page.
   The strip starts at the left gutter and bleeds to the right edge of the
   screen; it scrolls horizontally with snapping, arrows and keyboard. */
.rooms { display: flex; flex-direction: column; gap: 16px; }
.hscroll__track {
  margin-right: calc((100% - 100vw) / 2);   /* bleed to viewport edge, no right padding */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
}
.hscroll__track::-webkit-scrollbar { display: none; }
.hscroll__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.plans--rooms {
  grid-template-columns: repeat(5, 330px);
  width: max-content;
  padding-right: var(--gutter);   /* scrolled to the end, Terraza stops 72px from the right edge (owner request) */
}
.hscroll__track > ul > li { scroll-snap-align: start; }
.plans--rooms .plan__card { min-height: 827px; }

/* CONTRATAR lines up across cards (Oficina Virtual + Salas de Juntas).
   Each card is a subgrid of the strip, so its blocks share row heights with
   the other cards: the tallest content sets the row, shorter cards get the
   extra space above the button. Rooms flatten .plan__actions so the feature
   list (whose length varies) gets its own row above the CTA. */
/* Card heights from the design (814 / 827) are kept on the strip: flag row
   + card, with the last row taking any extra space (empty card bottom). */
.plans--virtual { grid-template-rows: 29px auto auto 1fr; min-height: calc(29px + 814px); }
.plans--rooms   { grid-template-rows: 29px repeat(4, auto) 1fr; min-height: calc(29px + 827px); }
.plans--3       { grid-template-rows: 29px repeat(4, auto) 1fr; min-height: calc(29px + 624px); }  /* Paquetes de Horas */
.plans--virtual .plan { grid-row: 2 / span 3; }
:is(.plans--rooms, .plans--3) .plan { grid-row: 2 / span 5; }
.plans--virtual .plan--featured { grid-row: 1 / span 4; }
:is(.plans--rooms, .plans--3) .plan--featured { grid-row: 1 / span 6; }
:is(.plans--virtual, .plans--rooms, .plans--3) .plan {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}
:is(.plans--virtual, .plans--rooms, .plans--3) .plan__card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 32px;
}
:is(.plans--virtual, .plans--rooms, .plans--3) .plan--featured .plan__card { grid-row: 2 / -1; }
:is(.plans--rooms, .plans--3) .plan__actions { display: contents; }
:is(.plans--rooms, .plans--3) .plan__cta,
:is(.plans--rooms, .plans--3) .plan__actions .plan__checks { margin-top: 8px; }   /* keeps the 40px from the features and to the checks */
.plans--rooms .plan:first-child .plan__card { border-right: 0; }
.plans--rooms .plan:nth-child(n+3) .plan__card { border-left: 0; }

.room__photo {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  background: var(--color-placeholder);
}
.room__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Crops from the design */
.room__img--auditorio { inset: auto; left: 0; top: -22.09%; width: 100%; height: 158.44%; }
.room__img--terraza   { inset: auto; left: 0; top: -5.48%; width: 110.95%; height: 139.79%; }

.room__pricing { display: flex; flex-direction: column; gap: 16px; }
.room__discount {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--color-text-2);
}
.room__discount-amount { font-size: 18px; }
.room__discount--text { font-size: 18px; line-height: 20px; }
.room__discount .plan__period { line-height: 18px; }
.room__custom {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.48px;
  color: #000;
}
.room__custom-note {
  display: block;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-text);
}

.rooms__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hscroll__nav { display: flex; gap: 8px; }
.hscroll__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-dark);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.hscroll__btn .icon { font-size: 20px; }
.hscroll__btn:hover:not(:disabled) { background: var(--color-dark); color: var(--color-white); }
.hscroll__btn:disabled { opacity: .3; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .hscroll__track { scroll-behavior: smooth; }
}

/* --- Pricing: tablet / mobile overrides go here --- */

/* Tablet: 48px gutter, narrower tabs, and the plan cards become a
   horizontal scroll strip of 324px cards that starts at the gutter and
   bleeds to the right edge (same pattern as .hscroll__track).
   Measured from a PNG export (Figma MCP unavailable), so values are ±1px. */
@media (max-width: 1023px) {
  .pricing__inner { padding-inline: 48px; }

  .pricing-tabs { width: 100%; }
  .pricing-tab { flex: 1 1 0; width: auto; }   /* 4 × 184.5px */

  .plans:not(.plans--rooms) {
    grid-template-columns: repeat(4, 324px);
    margin-right: calc((100% - 100vw) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .plans:not(.plans--rooms)::-webkit-scrollbar { display: none; }
  .plans:not(.plans--rooms) > li { scroll-snap-align: start; }
  /* Paquetes de Horas: 3 × 320px cards that grow with their content,
     plus the single Oficina Ejecutiva card (same size as desktop) */
  .plans.plans--3 { grid-template-columns: repeat(3, 320px); }
  .plans--rooms { padding-right: 0; }   /* end space is desktop only */
  :is(.plans--3, .pack-single) .offer__desc { line-height: 24px; }
  .pack-single .offer__desc { max-width: none; }
  :is(.plans--3, .pack-single) .plan__checks li { line-height: 24px; }
  :is(.plans--3, .pack-single) .plan__checks .icon { line-height: 24px; }
  /* The design lets these run 1–3px into the card padding instead of wrapping */
  .plans--3 .plan__features li,
  .pack-single .pack__hourly { white-space: nowrap; }

  /* Oficina Física: one 690px column, details first, photos below */
  .offer {
    max-width: 690px;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 24px;
  }
  .offer__content {
    order: -1;
    min-height: 0;
    padding-block: 32px 0;
    gap: 24px;
  }
  .offer__gallery { grid-template-rows: 432px 320px; }
  .offer__img--main { inset: 0; width: 100%; height: 100%; }   /* whole photo, no zoom */
}

/* Phone (390px frame): tabs stack into 48px rows; plan cards become a
   one-at-a-time carousel (full 342px width) with dots below the notes. */
@media (max-width: 767px) {
  .pricing__inner { padding: 48px 24px 45px; }
  .pricing__title { font-size: 38px; letter-spacing: -0.76px; }
  .pricing__body { gap: 32px; }

  .pricing-tabs { flex-direction: column; }
  .pricing-tab {
    flex: none;
    width: 100%;
    height: 49px;
    margin-left: 0;
    margin-top: -1px;            /* collapse shared borders: rows step 48px */
  }
  .pricing-tab:first-child { margin-top: 0; }

  /* Notes wrap on phone: 18px lines (6px between notes), check on line 1 */
  .pricing__notes { gap: 6px; }
  .pricing__notes li { align-items: flex-start; line-height: 18px; }
  .pricing__notes .icon { line-height: 18px; }

  .plans:not(.plans--rooms) {
    grid-template-columns: repeat(4, 100%);
    column-gap: 16px;
    margin-right: 0;             /* one card at a time, no bleed */
    margin-top: -28px;           /* the flag row sits in the 32px gap: card 1 lands 33px below the tabs */
  }
  .plans.plans--3:not(.plans--rooms) { grid-template-columns: repeat(3, 100%); }
  /* Cards are separate on phone, so every card gets all four borders */
  .plans:not(.plans--rooms) .plan__card { border: 1px solid var(--color-border); }
  .plans:not(.plans--rooms) .plan--featured .plan__card { border-color: var(--color-heading); }

  /* Dots: right under the cards (Paquetes de Horas) or under the notes
     (Oficina Virtual: 16px panel gap + 24 = 40px), as in each design */
  .pricing__dots { display: flex; gap: 16px; }
  .pricing__dots--after-notes { padding-top: 24px; }
  .pricing__dots .carousel-dot { width: 12px; height: 12px; }

  /* Paquetes de Horas: sub-tabs stack, centered (42px each, 16px apart) */
  .packages { gap: 32px; }
  .subtabs { flex-direction: column; align-items: center; gap: 16px; }
  .subtab { line-height: 36px; }

  /* Oficina Ejecutiva: the card is narrower than on tablet, so the hourly
     line wraps to two lines instead of running out of the card */
  .pack-single .pack__hourly { white-space: normal; }
  /* Features that wrap keep their icon on the first line */
  .plan__features li { align-items: flex-start; }
  .plan__features .icon { line-height: 24px; }

  /* Oficina Física: full-width card, smaller photos, 24px under the gallery */
  .offer { padding: 0 24px 24px; }
  .offer__gallery { grid-template-rows: 218px 144px; }
}


/* ==========================================================================
   CÓMO FUNCIONA — 3 steps joined by a progress track
   ========================================================================== */
.how { padding-block: 90px; }
.how__inner {
  width: 997px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.how__header {
  max-width: 321px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  text-align: center;
}
.how__lead {
  max-width: 244px;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text);
}

.steps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 251px);
  justify-content: space-between;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.step__icon { font-size: 40px; color: var(--color-ink); }

.step__heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step__title {
  display: flex;
  gap: 12px;
  padding-left: 9px;          /* number sits slightly in from the icon, as designed */
  font-weight: 400;
  font-size: 32px;
  line-height: 53px;
  letter-spacing: -0.64px;
  color: #000;
}

/* Track: lines of steps 1–2 reach toward the next step (332px / 329px in the design) */
.step__track {
  height: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: calc(100% + 81px);
}
.step:nth-child(2) .step__track { width: calc(100% + 78px); }
.step--last .step__track { width: 100%; }
.step__line { flex: 1; height: 2px; background: var(--color-border); }
.step__dot {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-border);
}
.step--current .step__line,
.step--current .step__dot { background: var(--color-accent); }

.step__text { font-size: 16px; line-height: 24px; color: var(--color-text); }

.step__cta {
  height: 42px;
  padding: 10px 0 10px 10px;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 1.4px;
}

/* --- Cómo funciona: tablet / mobile overrides go here --- */

/* Tablet: 48px gutter; steps fill the width (251 / 251 / rest, 24px gaps)
   and each track stays inside its own column. Measured from a 2× PNG export. */
@media (max-width: 1023px) {
  .how { padding-inline: 48px; }
  .steps {
    margin: 0;          /* <ol> keeps browser default margin/padding (reset only covers ul) */
    padding: 0;
    grid-template-columns: 251px 251px minmax(0, 1fr);
    justify-content: normal;
    gap: 24px;
  }
  .step__track,
  .step:nth-child(2) .step__track { width: 100%; }
}

/* Phone: the 3 steps (295px each, 24px gaps) become a horizontal scroll
   strip that starts at the 24px gutter and bleeds to the right edge */
@media (max-width: 767px) {
  .how { padding: 48px 24px; overflow-x: clip; }
  .steps {
    align-self: stretch;          /* not centered, so the bleed doesn't shift it right */
    width: auto;
    grid-template-columns: repeat(3, 295px);
    margin-right: calc((100% - 100vw) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: start; }
}


/* ==========================================================================
   POR QUÉ ESCOGER EVA — 3 large cards in a right-bleeding scroll strip
   (reuses .hscroll__track / .hscroll__nav from the Salas de Juntas strip)
   ========================================================================== */
.why { padding-block: 90px; }
.why__inner { display: flex; flex-direction: column; gap: 32px; }
.why__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.why__cards {
  display: grid;
  grid-template-columns: repeat(3, 526px);
  gap: 40px;
  width: max-content;
  padding-right: var(--gutter);   /* scrolled to the end, the last card stops 72px from the right edge (owner request) */
}

.why-card {
  position: relative;
  height: 521px;
  overflow: hidden;
  border-radius: 2px;
  padding: 46px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-white);
}
.why-card__top {
  position: relative;
  z-index: 1;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.why-card__eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 1.4px;
}
.why-card__title {
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
}
.why-card__title--narrow { max-width: 348px; }
.why-card__title--loose  { line-height: 39px; }

.why-card__foot {
  position: relative;
  z-index: 1;
  max-width: 450px;
  margin-left: -2px;
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 28px;
  color: #f0f0f0;
}
.why-card__big {
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 100px;
  line-height: 131px;
  letter-spacing: -2px;
  white-space: nowrap;
  margin-bottom: -2px;
}
.why-card__big--accent { color: var(--color-accent); }
.why-card__big--ink {
  font-weight: 500;
  font-size: 107.5px;
  letter-spacing: -2.15px;
  color: #000;
}

.why-card--dark   { background: #000; }
.why-card--accent { background: var(--color-accent); }

/* Card 1: soft teal/blue mesh gradient with film grain, recreated in CSS
   (swap for an exported image from Figma if an exact match is needed) */
.why-card--gradient {
  background:
    radial-gradient(55% 45% at 88% 8%,  rgba(244, 248, 251, .95), transparent 70%),
    radial-gradient(40% 38% at 92% 52%, rgba(236, 234, 250, .9),  transparent 70%),
    radial-gradient(42% 36% at 96% 96%, rgba(112, 160, 214, .95), transparent 70%),
    radial-gradient(50% 42% at 6% 96%,  rgba(156, 164, 168, .95), transparent 70%),
    radial-gradient(60% 48% at 48% 82%, rgba(28, 150, 166, .95),  transparent 70%),
    radial-gradient(85% 75% at 18% 28%, rgba(44, 172, 192, 1),    transparent 75%),
    #86c9d4;
}
.why-card--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Por qué escoger EVA: tablet / mobile overrides go here --- */

/* Tablet: desktop layout with the 48px tablet gutter (owner's request) */
@media (max-width: 1023px) {
  .why { padding-inline: 48px; }
  .why__cards { padding-right: 0; }   /* end space is desktop only */
}

/* Phone (390px frame): centered title, no arrows; one full-width card at a
   time with dots (same carousel as pricing) */
@media (max-width: 767px) {
  .why { padding: 48px 24px; }
  .why__header { justify-content: center; text-align: center; }
  .why__header .section-title { text-wrap: wrap; }   /* "Por qué escoger" / "EVA" */
  .why .hscroll__nav { display: none; }

  .why .hscroll__track { margin-right: 0; }
  .why-card { padding-right: 28px; }   /* text box 4px wider so lines break as designed */
  /* Big words shrink to fit the 282px text box (owner's choice; desktop
     ratio kept: "Flexible" 100 → 58px, "20 años" 107.5 → 62px) */
  .why-card__big { font-size: 58px; line-height: 1.31; letter-spacing: -0.02em; }
  .why-card__big--ink { font-size: 62px; letter-spacing: -0.02em; }
  .why__cards {
    width: 100%;
    grid-template-columns: repeat(3, 100%);
    gap: 16px;
  }

  .why__dots { display: flex; }
  .why__dots .carousel-dot { width: 12px; height: 12px; }
}


/* ==========================================================================
   TESTIMONIOS — "120+ clientes"
   ========================================================================== */
.testimonials { background: var(--color-cream); }
.testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding-top: 90px;
  padding-bottom: 180px;
}
.testimonials__header {
  max-width: 583px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.testimonials__eyebrow { font-size: 20px; line-height: 28px; color: var(--color-text); }
.testimonials__title {
  font-weight: 400;
  font-size: 60px;
  line-height: 56px;
  letter-spacing: -1.2px;
  color: #000;
}

.testimonials__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 90px;
}
.testimonial {
  display: flex;
  border-left: 2px solid #000;
  padding-left: 18px;
}
.testimonial__body {
  margin: 0;
  width: 276px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.testimonial__stars { display: flex; gap: 4px; height: 24px; color: #000; }
.testimonial__stars .icon { font-size: 24px; width: 24px; }
.testimonial__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
}
.testimonial__quote {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}
.testimonial__name {
  margin-top: auto;          /* names line up at the bottom of every column */
  padding-top: 15px;         /* + 17px gap = 32px, as designed */
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero;   /* Plex Mono slashed 0 (owner request) */
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--color-text);
}

.testimonials__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.testimonials__list:focus { outline: none; }
.testimonials__list:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Carousel dots: shown on tablet and phone (see .carousel-dots) */
.testimonials__dots { gap: 9px; }

/* --- Testimonios: tablet / mobile overrides go here --- */

/* Tablet: one testimonial at a time (296px: 2px rule + 18px + 276px body),
   swipeable with snapping, plus dots. Cards keep equal heights so the
   names line up. Measured from a 2× PNG export. */
@media (max-width: 1023px) {
  .testimonials__list {
    width: 296px;
    justify-content: flex-start;
    gap: 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .testimonials__list::-webkit-scrollbar { display: none; }
  .testimonial { flex: 0 0 100%; scroll-snap-align: start; }
  .testimonial__body { min-height: 234px; }   /* design leaves room for a 4-line quote */
  .testimonials__dots { display: flex; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .testimonials__list { scroll-behavior: smooth; }
}

/* Phone: 48px between the title and the card, 24px between the card and
   the dots (owner's values; no phone design for this section) */
@media (max-width: 767px) {
  .testimonials__inner { gap: 48px; }
  .testimonials__carousel { gap: 24px; }
}


/* ==========================================================================
   BENEFICIOS — dark band, photo + benefit list
   ========================================================================== */
.benefits { background: var(--color-heading); color: #f0f0f0; }
.benefits__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 92px;
  padding-block: 90px;
}
.benefits__photo {
  position: relative;
  flex: 0 1 636px;
  height: 514px;
  overflow: hidden;
  background: #2a2a2a;
}
/* Crop from the design */
.benefits__img {
  position: absolute;
  left: -25.23%;
  top: 0;
  width: 135.83%;
  height: 112.06%;
  max-width: none;
  object-fit: cover;
}
.benefits__content {
  width: 331px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.benefits__title {
  font-weight: 400;
  font-size: 48px;
  line-height: 53px;
  letter-spacing: -0.96px;
  color: var(--color-white);
}
.benefits__list { width: 312px; display: flex; flex-direction: column; gap: 32px; }
.benefit { display: flex; align-items: flex-start; gap: 12px; }
.benefit__icon { font-size: 24px; color: #f0f0f0; }
.benefit__text { width: 276px; display: flex; flex-direction: column; gap: 4px; }
.benefit__title { font-weight: 500; font-size: 20px; line-height: 24px; }
.benefit__desc { font-size: 16px; line-height: 20px; }

.benefits__cta {
  height: 60px;
  padding: 10px;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
}

/* --- Beneficios: tablet / mobile overrides go here --- */

/* Tablet: photo (same 636 × 514 crop) stacked above a centered 430px column */
@media (max-width: 1023px) {
  .benefits__inner {
    flex-direction: column;
    gap: 60px;
  }
  .benefits__photo { flex: none; width: 636px; max-width: 100%; }
  .benefits__content { width: 430px; max-width: 100%; }
  .benefits__list { width: auto; }
  .benefit__text { width: auto; flex: 1; }
}

/* Phone: full-width 342 × 260 photo (whole picture), copy below */
@media (max-width: 767px) {
  .benefits__inner { gap: 48px; padding: 32px 24px 48px; }
  .benefits__photo { width: 100%; height: 260px; }
  .benefits__img { left: 0; width: 100%; height: 100%; }
  .benefits__content { width: 100%; }
}


/* ==========================================================================
   PREGUNTAS FRECUENTES — accordion (native <details>, one open at a time)
   ========================================================================== */
.faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 90px;
}
.faq__list { display: flex; flex-direction: column; gap: 32px; }

.faq__item { border-bottom: 1px solid var(--color-faded); }
.faq__item[open],
.faq__item:last-child { border-bottom: 0; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  list-style: none;
  cursor: pointer;
  font-size: 32px;
  line-height: 53px;
  letter-spacing: -0.64px;
  color: var(--color-faded);
  transition: color .2s ease;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover,
.faq__item[open] .faq__question { color: #000; }

.faq__icon {
  font-size: 32px;
  color: var(--color-ink);
  transition: transform .25s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }   /* + turns into × */

.faq__answer {
  max-width: 1098px;
  margin-top: -8px;           /* 8px gap between question and answer, as designed */
  padding-bottom: 16px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: #000;
}
/* Answers with several items: one per line, each led by a dash */
.faq__answer-list { display: flex; flex-direction: column; gap: 8px; }
.faq__answer-list li { display: flex; gap: 8px; }
.faq__answer-list li::before { content: "–"; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq__icon, .faq__question { transition: none; }
}

/* --- Preguntas frecuentes: tablet / mobile overrides go here --- */

/* Phone: centered 2-line title; questions wrap on 32px lines with the
   icon on the first line; 24px between an open question and its answer */
@media (max-width: 767px) {
  .faq { padding: 48px 24px; }
  .faq .section-title {
    text-align: center;
    font-size: 38px;
    line-height: 48px;
    letter-spacing: -0.76px;
    text-wrap: wrap;
  }
  .faq__question { align-items: flex-start; line-height: 32px; }
  .faq__icon { line-height: 32px; }
  .faq__answer { margin-top: 8px; }
}


/* ==========================================================================
   CONTÁCTANOS — photo + contact form
   ========================================================================== */
.contact { background: var(--color-cream); }
.contact__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding-block: 90px;
}
.contact__photo {
  position: relative;
  flex: 0 1 551px;
  height: 595px;
  overflow: hidden;
  background: var(--color-faded);
}
.contact__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.contact__content {
  flex: 0 1 619px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__header { display: flex; flex-direction: column; gap: 9px; }
.contact__title {
  font-weight: 400;
  font-size: 40px;
  line-height: 53px;
  letter-spacing: -0.8px;
  color: #000;
}
.contact__lead { font-size: 20px; line-height: 28px; color: var(--color-text); }

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .btn { margin-top: 8px; }   /* 24px total between last field and button */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__input {
  width: 100%;
  height: 61px;
  padding: 0 16px 0 24px;
  border: 1px solid #898989;
  border-radius: 2px;
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: -0.32px;
  color: #040b16;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder { color: rgba(4, 11, 22, 0.7); opacity: 1; }
.field__input:hover { border-color: #5f5f5f; }
.field__input:focus {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: 0 0 0 1px var(--color-dark);
}
.field__input--area {
  height: 144px;
  min-height: 144px;
  padding: 14px 16px 16px 24px;
  border-color: rgba(4, 11, 22, 0.7);
  resize: vertical;
}
.field__input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.field__error { font-size: 14px; line-height: 18px; color: var(--color-error); }

.contact-form__submit {
  height: 60px;
  padding: 10px;
  border: 0;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
  cursor: pointer;
}
.contact-form__submit:disabled { opacity: .6; cursor: progress; }

/* Result of sending (filled in by js/main.js) */
.contact-form__status { font-size: 16px; line-height: 22px; color: var(--color-success); }
.contact-form__status--error { color: var(--color-error); }

/* Spam trap: off-screen for people (not display:none, which some bots skip) */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Contáctanos: tablet / mobile overrides go here --- */

/* Tablet: shorter photo (551 × 388) stacked above the 619px form column */
@media (max-width: 1023px) {
  .contact__inner { flex-direction: column; }
  .contact__photo { flex: none; width: 551px; max-width: 100%; height: 388px; }
  .contact__content { flex: none; width: 619px; max-width: 100%; }
}

/* Phone: full-width 342 × 271 photo, 38px title, form at full width */
@media (max-width: 767px) {
  .contact__inner { gap: 32px; padding: 24px 24px 32px; }
  .contact__photo { width: 100%; height: 271px; }
  .contact__content { width: 100%; }
  .contact__title { font-size: 38px; letter-spacing: -0.76px; }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: #000; color: var(--color-white); }
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-block: 72px;
}
.footer__brand { width: 518px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.footer__logo { color: var(--color-white); }

.footer__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 17px;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
}
.footer__contact a,
.footer__col a { transition: color .2s ease; }
.footer__contact a:hover,
.footer__col a:hover { color: var(--color-accent); }

.footer__heading {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: #aeaeb2;
}
.footer__social { display: flex; flex-direction: column; gap: 16px; }
.social { display: flex; gap: 8px; }
.social__link { display: block; width: 24px; height: 24px; color: var(--color-white); transition: color .2s ease; }
.social__link:hover { color: var(--color-accent); }
.social__icon { display: block; width: 24px; height: 24px; }

.footer__nav { display: flex; align-items: flex-start; gap: 56px; }
.footer__col { display: flex; flex-direction: column; gap: 36px; }
.footer__col--menu { width: 95px; }
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
}

.footer__nowrap { white-space: nowrap; }   /* phone line breaks before "/ Teléfono", never inside a number */

/* --- Footer: tablet / mobile overrides go here --- */

/* Tablet: link columns keep their width; the contact column takes the rest */
@media (max-width: 1023px) {
  .footer__brand { flex: 1 1 0; min-width: 0; }
  .footer__nav,
  .footer__col--menu { flex-shrink: 0; }
  /* Tablet + phone designs set footer text on 20px lines */
  .footer__contact,
  .footer__heading,
  .footer__col ul { line-height: 20px; }
}

/* Phone: brand block on top, the two link columns below it */
@media (max-width: 767px) {
  .footer__inner { flex-direction: column; padding: 48px 24px 72px; }
  .footer__brand { flex: none; width: 100%; }
}