/* ============================================================
   Amygo — Landing page styles
   Fuente: Figtree (Google Fonts)
   ============================================================ */

:root {
  /* Colores de marca */
  --brown: #594638;
  --pink: #F278A1;
  --green: #007B63;
  --blue: #2E6189;
  --p-color: #6A6A6A;
  --p-small-color: #102A3A;
  --placeholder-color: #B2B2B2;

  /* Fondos de sección */
  --bg-cream: #E7D7B1;
  --bg-blue: #B9D2DD;
  --bg-tan: #D5BEA7;
  --bg-footer: #594638;

  /* Tipografía — escala del diseño (referencia desktop 1440px) */
  --fs-h1: clamp(2.5rem, 3.2rem + 2vw, 5.875rem);   /* 94px desktop */
  --fs-h2: clamp(2rem, 2.4rem + 1.6vw, 4.375rem);   /* 70px desktop */
  --fs-h3: clamp(1.5rem, 1.7rem + 1vw, 2.75rem);    /* 44px desktop */
  --fs-p: clamp(1.05rem, 1.1rem + 0.5vw, 2rem);     /* 32px desktop */
  --fs-p-bold: clamp(1.05rem, 1.15rem + 0.35vw, 1.5rem); /* 24px desktop */
  --fs-p-small: 1rem;                                /* 16px, no escala */
  --fs-20: clamp(0.95rem, 1rem + 0.3vw, 1.25rem);    /* 20px desktop, escala proporcional */

  --max-width: 1320px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  background: var(--bg-cream);
  color: var(--brown);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

picture {
  display: block;
  line-height: 0;
}

a {
  text-decoration: none;
  color: var(--pink);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   Tipografía base
   ============================================================ */

h1, h2, h3 {
  font-weight: 700;
  color: var(--brown);
  margin: 0;
  line-height: 1.1;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  font-size: var(--fs-p);
  font-weight: 400;
  color: var(--p-color);
  margin: 0;
  line-height: 1.35;
}

.fw-regular {
  font-weight: 400 !important;
}

.p-small {
  font-size: var(--fs-p-small);
  font-weight: 400;
  color: var(--p-small-color);
  line-height: 1.5;
  margin: 0;
}

.text-20 {
  font-size: var(--fs-20) !important;
}

.p-bold {
  font-size: var(--fs-p-bold);
  font-weight: 700;
  color: var(--brown);
  margin: 0;
  line-height: 1.3;
}

.p-bold.text-green  { color: var(--green); }
.p-bold.text-blue   { color: var(--blue); }

.eyebrow {
  display: inline-block;
  font-size: clamp(0.95rem, 1rem + 0.2vw, 1.25rem); /* 20px desktop */
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 12px;
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-cream);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

.site-header .logo img {
  height: 44px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: transparent;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--brown);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--brown);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active {
  color: var(--pink);
}

/* ============================================================
   Secciones genéricas
   ============================================================ */

.section {
  padding: clamp(56px, 9vw, 120px) 0;
}

.section--cream  { background: var(--bg-cream); }
.section--offwhite { background: #FAF5EC; }
.section--blue   { background: var(--bg-blue); }
.section--tan    { background: var(--bg-cream); }

.section--centered {
  text-align: center;
}

.section--centered .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section--centered p {
  max-width: 780px;
}

/* Layout imagen + texto (hero, amygo pass, negocios) */
.split {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
}

.split.split--reverse {
  flex-direction: row-reverse;
}

.split__media {
  flex: 0 0 auto;
  width: 56%;
  max-width: 760px;
}

/* Fotos de los owners (Amygo PASS y Beneficios): 20% más grandes */
#amygo-pass .split__media,
#beneficios .split__media {
  width: 67.2%;
  max-width: 912px;
}

/* Imagen de la sección Negocios (Hand2): 64% del tamaño original */
#para-negocios .split__media {
  width: 35.84%;
  max-width: 486px;
}

@media (min-width: 961px) {
  /* La imagen se reduce (sin recortar) hasta que su alto coincide
     con el del bloque de texto; el ancho se ajusta solo, respetando
     su proporción original */
  #para-negocios .split {
    position: relative;
  }

  #para-negocios .split__content {
    width: 100%;
    padding-right: calc(min(35.84%, 486px) + 48px);
  }

  #para-negocios .split__media {
    position: absolute;
    top: 0;
    bottom: calc(-1 * clamp(56px, 9vw, 120px));
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }

  #para-negocios .split__media picture {
    display: block;
    height: 100%;
  }

  #para-negocios .split__media img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
}

.split__content {
  flex: 1 1 auto;
  min-width: 0;
}

.split__content > * + * {
  margin-top: 20px;
}

/* En desktop, quitamos el padding visual debajo de las imágenes de
   las secciones con layout imagen + texto: llegan hasta el borde
   inferior real de la sección. El margen izquierdo se mantiene
   (respeta el padding normal del container). */
@media (min-width: 961px) {
  .split {
    align-items: flex-end;
  }

  .split__media {
    margin-bottom: calc(-1 * clamp(56px, 9vw, 120px));
  }

  /* Amygo PASS en funcionalidades.html: la foto de la chica con el
     perro no sangra hacia abajo como el resto de las fotos de .split,
     y el texto se centra verticalmente con el alto total de la foto. */
  #pass .split__media {
    margin-bottom: 0;
  }

  #pass .split {
    align-items: center;
  }

  #pass {
    padding-bottom: 0;
  }

  /* Beneficios: la imagen arranca sin espacio arriba, y el texto
     se centra verticalmente con el alto total de la imagen */
  #beneficios .split__media {
    align-self: flex-start;
  }

  #beneficios .split__content {
    align-self: center;
  }

  /* Fotos de los owners: llegan hasta el borde izquierdo real de
     la pantalla, así el texto de al lado tiene más espacio */
  #amygo-pass .split__media,
  #beneficios .split__media {
    margin-left: calc(-1 * max(24px, (100vw - var(--max-width)) / 2 + 24px));
  }

  /* Sube todo el contenido del hero (texto + imagen) 100px juntos,
     como un bloque, sin tocar el resto del layout. */
  .hero .split {
    transform: translateY(-100px);
  }

  /* Además, el grupo de texto + botones de descarga sube 150px más
     (independiente de la imagen, que se queda donde está el bloque
     de arriba la dejó). */
  .hero .split__content {
    transform: translateY(-150px);
  }

  /* El transform no cambia el alto real de la sección, así que sin
     esto quedaba un hueco vacío de 100px debajo del hero (donde el
     contenido "solía" terminar). Compensamos achicando la sección. */
  .hero {
    margin-bottom: -100px;
  }
}

.hero .split__content > * + * {
  margin-top: 24px;
}

/* ============================================================
   Formulario (hero + negocios)
   ============================================================ */

.email-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px !important;
}

.email-form__field {
  flex: 1 1 260px;
  min-width: 0;
  border-radius: 100px;
  border: none;
  padding: 18px 28px;
  font-family: inherit;
  font-size: clamp(1rem, 1.1vw + 0.6rem, 1.25rem); /* ~20px desktop */
  font-weight: 400;
  color: var(--brown);
  background: #FFFFFF;
}

.email-form__field::placeholder {
  color: var(--placeholder-color);
}

.email-form__submit {
  flex: 0 0 auto;
  border-radius: 100px;
  background: var(--pink);
  color: #FFFFFF;
  padding: 18px 40px;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.15rem + 0.35vw, 2rem);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.email-form__submit:hover,
.email-form__submit:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.email-form__status {
  width: 100%;
  font-size: 0.95rem;
  margin-top: 4px;
  min-height: 1.2em;
}

.email-form__status[data-state="success"] { color: var(--green); }
.email-form__status[data-state="error"]   { color: #B3261E; }

/* ============================================================
   Checklist (con ícono check)
   ============================================================ */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checklist img {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 4px;
}

.checklist p,
.checklist .p-small {
  flex: 1 1 auto;
}

/* Lista corta tipo "Escanea / Validá / Disfrutá" */
.step-inline-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
}

.step-inline-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-inline-list img {
  width: 22px;
  height: 22px;
}

.step-inline-list .text-20 {
  color: var(--brown);
  font-weight: 400;
}

/* ============================================================
   Grillas de columnas (4 pilares / cómo funciona)
   ============================================================ */

.columns {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  width: 100%;
}

.columns--4 { grid-template-columns: repeat(4, 1fr); }
.columns--3 { grid-template-columns: repeat(3, 1fr); }

.column-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.column-card img.icon {
  width: 58px;
  height: 58px;
}

.column-card .p-bold {
  margin-top: 4px;
}

/* ============================================================
   Botón rosado genérico (ej. "Ver todas las funcionalidades")
   ============================================================ */

.btn-pink {
  display: inline-block;
  border-radius: 100px;
  background: var(--pink);
  color: #FFFFFF;
  padding: 16px 32px;
  font-weight: 700;
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.15rem);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-pink:hover,
.btn-pink:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ============================================================
   Botones de descarga de la app (App Store / Google Play)
   ============================================================ */

.download-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* En el hero de inicio el resto del contenido (título, texto) está
   alineado a la izquierda, así que los botones de descarga también
   arrancan del margen izquierdo en vez de centrarse. */
.hero .download-cta {
  justify-content: flex-start;
}

.download-cta__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brown);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 12px 22px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.download-cta__btn:hover,
.download-cta__btn:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.download-cta__btn img {
  width: auto;
  height: 28px;
}

/* El logo de Apple es negro por defecto (invisible sobre el botón
   oscuro), así que lo pasamos a blanco. El de Google Play ya viene
   con sus 4 colores propios, así que ese lo dejamos tal cual. */
.download-cta__btn img.icon-mono {
  filter: brightness(0) invert(1);
}

.download-cta__btn span {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: left;
}

.download-cta__btn strong {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Bloque "captura de teléfono + texto" (sección Identificación):
   layout propio, sin las reglas de sangrado/anclaje al piso que usa
   .split para las fotos horizontales del hero/Amygo PASS/Beneficios,
   que hacían que la imagen se recortara raro y el texto quedara
   pegado a la izquierda. */
.phone-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 80px);
}

.phone-feature--reverse {
  flex-direction: row-reverse;
}

.phone-feature__media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 320px;
}

.phone-feature__content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;
  text-align: left;
}

.phone-feature__content > * + * {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .phone-feature,
  .phone-feature--reverse {
    flex-direction: column;
  }
}

/* ============================================================
   Feature rows (página Funcionalidades): ícono + texto,
   alternando de lado sección a sección con .feature-row--reverse
   ============================================================ */

.feature-row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.feature-row--reverse .feature-row {
  flex-direction: row-reverse;
}

.feature-row__icon {
  flex: 0 0 auto;
  width: clamp(96px, 10vw, 140px);
  height: clamp(96px, 10vw, 140px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-row__icon img {
  width: 44%;
  height: 44%;
}

.feature-row__content {
  flex: 1 1 auto;
  min-width: 0;
}

.feature-row__content > * + * {
  margin-top: 16px;
}

.feature-row__title {
  font-size: var(--fs-h3);
}

@media (max-width: 760px) {
  .feature-row,
  .feature-row--reverse .feature-row {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--bg-footer);
  padding: 56px 0 32px;
  position: relative;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.footer-gotop {
  position: absolute;
  top: 28px;
  right: 24px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.footer-gotop:hover,
.footer-gotop:focus-visible {
  transform: translateY(-2px);
}

.footer-gotop img {
  width: 72px;
  height: 72px;
}

.footer-logo img {
  height: 40px;
  width: auto;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}

.footer-nav a {
  font-size: 1rem;
  color: #F4EDE1;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  opacity: 1;
  color: var(--pink);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.footer-social img {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Planes (página de precios para negocios)
   ============================================================ */

.pricing-grid {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  width: 100%;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 12px 32px rgba(89, 70, 56, 0.08);
  border: 2px solid transparent;
}

.price-card--highlight {
  border-color: var(--pink);
}

.price-card__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: #007B63;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

.price-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.price-card__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.price-card--regular .price-card__dot { background: #4CAF7D; }
.price-card--silver  .price-card__dot { background: #A6A6A6; }
.price-card--gold    .price-card__dot { background: #E3A93B; }

.price-card__name p {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown);
}

.price-card__price {
  margin: 16px 0 4px;
}

.price-card__price .amount {
  font-size: clamp(1.8rem, 1.6rem + 1.2vw, 2.6rem);
  font-weight: 700;
  color: var(--brown);
  line-height: 1.1;
}

.price-card__price .amount span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--p-color);
}

.price-card__price .annual {
  font-size: 0.95rem;
  color: var(--p-color);
  margin-top: 2px;
}

.price-card__features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  color: var(--brown);
  line-height: 1.4;
}

.price-card__features li.is-muted {
  color: #B9AFA2;
}

.price-card__features img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.price-card__cta {
  margin-top: 28px;
  width: 100%;
  border-radius: 100px;
  background: var(--pink);
  color: #FFFFFF;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.price-card__cta:hover,
.price-card__cta:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.price-card__cta--anual {
  display: block;
  margin-top: 10px;
  width: 100%;
  border-radius: 100px;
  background: var(--green);
  color: #FFFFFF;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.price-card__cta--anual:hover,
.price-card__cta--anual:focus-visible {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

.pricing-note {
  margin-top: 28px;
  font-size: 0.95rem;
  color: var(--p-color);
  max-width: 780px;
}

.pricing-note strong {
  color: var(--brown);
}

/* Formulario "Elegí tu plan" */
.plan-form-card {
  margin-top: clamp(48px, 6vw, 80px);
  background: #FFFFFF;
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  max-width: 640px;
  width: 100%;
  text-align: left;
}

.plan-form-card h3 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
}

.plan-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-form__field {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #E4DCCF;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--brown);
  background: #FBF8F3;
}

.plan-form__field::placeholder {
  color: var(--placeholder-color);
}

.plan-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23594638' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.plan-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--p-color);
  line-height: 1.45;
}

.plan-form__consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--pink);
}

.plan-form__consent a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
}

.plan-form__submit {
  margin-top: 4px;
  border-radius: 100px;
  background: var(--pink);
  color: #FFFFFF;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.plan-form__submit:hover,
.plan-form__submit:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.plan-form__status {
  font-size: 0.95rem;
  min-height: 1.2em;
}

.plan-form__status[data-state="success"] { color: var(--green); }
.plan-form__status[data-state="error"]   { color: #B3261E; }

/* ============================================================
   Páginas legales (Términos / Privacidad)
   ============================================================ */

.legal-page {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 8vw, 96px);
  text-align: left;
}

.legal-page h1 {
  font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.8rem);
  margin-bottom: 8px;
}

.legal-page .legal-updated {
  font-size: 0.95rem;
  color: var(--p-color);
  margin-bottom: 32px;
}

.legal-page h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  margin-top: 44px;
  margin-bottom: 14px;
  color: var(--blue);
}

.legal-page p,
.legal-page li {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--brown);
  line-height: 1.6;
  margin: 0 0 14px;
}

.legal-page ul {
  padding-left: 22px;
  margin: 0 0 14px;
}

.legal-page a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 0.95rem;
}

.legal-page th,
.legal-page td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E4DCCF;
}

.legal-page th {
  color: var(--blue);
  font-weight: 700;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .main-nav {
    position: fixed;
    inset: 72px 16px auto 16px;
    background: var(--bg-cream);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(89, 70, 56, 0.18);
    padding: 12px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    background: rgba(89, 70, 56, 0.06);
  }

  .nav-toggle {
    display: block;
  }

  .split,
  .split.split--reverse {
    flex-direction: column;
    text-align: center;
  }

  /* Hero, Amygo PASS y Beneficios: en mobile la imagen pasa a estar
     debajo del texto (en el HTML la imagen va primero) */
  .hero .split__content,
  #amygo-pass .split__content,
  #beneficios .split__content,
  #pass .split__content {
    order: 1;
  }

  .hero .split__media,
  #amygo-pass .split__media,
  #beneficios .split__media,
  #pass .split__media {
    order: 2;
  }

  /* Sin el padding inferior de la sección debajo de la imagen
     (en desktop se compensa con margin negativo; en mobile
     directamente no hace falta) */
  .hero,
  #amygo-pass,
  #beneficios,
  #pass {
    padding-bottom: 0;
  }

  /* El hero arranca más arriba en mobile (menos aire encima del
     texto) para que el título, la bajada y el botón entren en la
     pantalla sin hacer scroll. */
  .hero {
    padding-top: clamp(20px, 4vw, 40px);
  }

  .hero .split__content > * + * {
    margin-top: 16px;
  }

  .split__media {
    width: 88%;
    max-width: 480px;
  }

  /* Negocios: en mobile no se muestra la imagen */
  #para-negocios .split__media {
    display: none;
  }

  .split__content {
    text-align: center;
  }

  .checklist li {
    text-align: left;
  }

  .columns--4,
  .columns--3 {
    grid-template-columns: 1fr 1fr;
  }

  .email-form {
    flex-direction: column;
  }

  .email-form__field {
    width: 100%;
    flex: 1 1 auto;
  }

  .email-form__submit {
    width: 100%;
  }

  .footer-gotop {
    position: static;
    order: -1;
    margin: 0 auto;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .plan-form-card {
    padding: 28px 22px;
  }
}

@media (max-width: 560px) {
  .columns--4,
  .columns--3 {
    grid-template-columns: 1fr;
  }

  .split__media {
    width: 92%;
  }
}

.nowrap {
  white-space: nowrap;
}

/* Bajada del hero: un poco más chica que el resto de los párrafos
   del sitio para que el texto entre cómodo en 3 líneas en la mayoría
   de los anchos de pantalla, usando todo el ancho de la columna
   (igual que el título arriba). */
.hero-lead {
  font-size: clamp(1rem, 1.05rem + 0.4vw, 1.75rem) !important;
}

/* Bajada del hero de Funcionalidades: dos versiones con distintos
   cortes de línea según el ancho de pantalla (ver funcionalidades.html) */
.hero-sub {
  margin-top: 20px;
}

.hero-sub--mobile { display: none; }

@media (max-width: 760px) {
  .hero-sub--desktop { display: none; }
  .hero-sub--mobile { display: block; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accesibilidad: foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}