/* ============================================================
   acuaponia.com — Home v2
   Maquetado fiel al Figma de Gina (QKODTxNhsZ33nBmUgU42GU, frame "Desktop" 138:45)
   Código real y responsivo: sin lienzo escalado, sin texto horneado en imágenes.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy:        #062165;
  --lime:        #9BC63C;
  --lime-soft:   #C3DD8A;
  --lime-wash:   rgba(155, 198, 60, 0.15);
  --steel:       #467B9A;
  --mist:        #D8E7E6;
  --ink:         #303030;
  --white:       #FFFFFF;

  --shell:       1285px;
  --gutter:      clamp(16px, 4vw, 40px);

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --shadow-nav:  0 4px 4.3px rgba(0, 0, 0, 0.11);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-soft: 0 2px 5.3px rgba(0, 0, 0, 0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.35;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

.shell {
  width: 100%;
  /* --shell es el ancho del CONTENIDO (1285px en el Figma); el gutter va por fuera */
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.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;
}

/* Títulos de sección — Jost ExtraBold 47.7px / lh 68.9 en el Figma */
.section-title {
  font-size: clamp(30px, 3.6vw, 47.7px);
  font-weight: 800;
  line-height: 1.44;
  text-align: center;
  color: var(--navy);
}

/* ============================================================
   1 · Menú superior
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  box-shadow: var(--shadow-nav);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 113px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 36px);
}
.logo {
  font-size: clamp(22px, 2.1vw, 30.4px);
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo span { color: var(--lime); }

.nav__divider {
  width: 2.77px;
  height: 34px;
  background: var(--navy);
  border-radius: 2px;
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
  margin-right: auto;
}
.nav__links a {
  font-size: clamp(16px, 1.5vw, 21.2px);
  font-weight: 500;
  padding: 6px 4px;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__links a:hover { color: var(--steel); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  flex-shrink: 0;
}

.btn-account,
.btn-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding-inline: 14px;
  border-radius: 9.63px;
  font-size: clamp(15px, 1.35vw, 19.6px);
  font-weight: 500;
  color: var(--lime);
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.btn-account { border: 1.61px solid var(--lime); }
.btn-signin  { background: var(--navy); }
.btn-account:hover { background: rgba(155, 198, 60, 0.10); transform: translateY(-1px); }
.btn-signin:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 33, 101, 0.28); }
.btn-account img, .btn-signin img { width: 21px; height: 20px; flex-shrink: 0; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(17px, 1.5vw, 21.2px);
  font-weight: 500;
}
.lang img { width: 9px; height: 5px; }

/* Hamburguesa (sólo móvil/tablet) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  height: 2.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   2 · Hero + buscador
   ============================================================ */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF -32.4%, var(--mist) 46.6%, var(--steel) 139.8%);
  padding-block: clamp(20px, 2.4vw, 30px) 0;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(16px, 3vw, 40px);
  max-width: 1291px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 259px;
}
.hero__copy { padding-bottom: clamp(20px, 2.6vw, 32px); }
.hero h1 {
  font-size: clamp(32px, 4.2vw, 51.5px);
  font-weight: 800;
  line-height: 1.445;  /* Figma: 51.5px / 74.4px */
  margin-bottom: 6px;
}
.hero__sub {
  font-size: clamp(16px, 1.7vw, 20.3px);
  font-weight: 500;
  line-height: 1.448;  /* Figma: 20.3px / 29.4px */
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

/* Buscador — rect blanco 627×53 r8.1 en el Figma */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(627px, 100%);
  height: 53px;
  padding: 0 8px 0 22px;
  background: var(--white);
  border-radius: 8.12px;
  box-shadow: 0 2px 5.28px rgba(0, 0, 0, 0.14);
}
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-size: clamp(15px, 1.5vw, 20.3px);
  font-weight: 300;
  color: var(--ink);
}
.search__input::placeholder { color: var(--ink); opacity: 1; }
.search__input:focus { outline: none; }
.search__sep { width: 1px; height: 29px; background: var(--ink); opacity: 0.55; flex-shrink: 0; }
.search__cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15.6px;
  font-weight: 300;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.search__cat img { width: 7px; height: 4px; }
.search__btn {
  flex-shrink: 0;
  height: 28.4px;
  padding-inline: 15px;
  background: var(--navy);
  color: var(--white);
  font-size: 15.6px;
  font-weight: 700;
  border-radius: 6.77px;
  transition: background-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.search__btn:hover { background: var(--steel); transform: translateY(-1px); }

.hero__art {
  align-self: end;
  justify-self: end;
  width: 100%;
  max-width: 567px;
  margin-bottom: -6px;
}
.hero__art img { width: 100%; height: auto; }

/* ============================================================
   3 · Descubre
   ============================================================ */
.descubre { padding-block: clamp(36px, 5vw, 56px) 0; }
.descubre__grid {
  display: grid;
  grid-template-columns: minmax(0, 589fr) minmax(0, 460fr);
  gap: 20px;
  max-width: 1069px;
  margin: clamp(20px, 3vw, 34px) auto 0;
}
.descubre__side { display: grid; grid-template-rows: 1fr 1fr; gap: 15px; }

/* Tarjeta media genérica (imagen de fondo + contenido encima) */
.mcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-xl);
  isolation: isolate;
}
.mcard img.mcard__bg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.mcard:hover img.mcard__bg { transform: scale(1.04); }

.mcard--feature { border-radius: 30px; aspect-ratio: 589 / 424; }
.mcard--wide    { aspect-ratio: 460 / 207; }

/* Pastilla de categoría (Video destacado / Noticias / Eventos) */
.pill {
  position: absolute;
  top: 16px; left: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 27.6px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: 14.7px;
  font-weight: 500;
  color: var(--white);
}
.pill img { width: 19px; height: 18px; }
.pill--navy  { background: var(--navy); }
.pill--lime  { background: var(--lime); }
.pill--steel { background: var(--steel); }

/* Botón "Ver más >" / "Saber más >" */
.morelink {
  position: absolute;
  right: 18px; bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20.7px;
  padding-inline: 13px;
  border-radius: var(--r-pill);
  background: var(--mist);
  color: var(--navy);
  font-size: 14.7px;
  font-weight: 500;
  transition: background-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.mcard:hover .morelink { background: var(--lime); transform: translateX(2px); }

.mcard__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, var(--steel) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.mcard__title {
  position: absolute;
  left: 26px; bottom: 14px;
  z-index: 2;
  max-width: 65%;
  font-size: clamp(18px, 1.9vw, 27.3px);
  font-weight: 700;
  line-height: 1.447;  /* Figma: 27.3px / 39.5px */
  color: var(--white);
}

/* Play grande del video destacado */
.playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 88px;
  transition: transform 0.25s var(--ease);
}
.mcard:hover .playbtn { transform: translate(-50%, -50%) scale(1.08); }

/* ============================================================
   4 · Explora por categorías
   ============================================================ */
.categorias { padding-block: clamp(40px, 5.5vw, 60px) 0; }
.categorias__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(20px, 3vw, 31px);
}
.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 239px;
  padding: 20px 12px 18px;
  background: var(--mist);
  border-radius: 17.43px;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cat:hover {
  transform: translateY(-6px);
  background: var(--lime-soft);
  box-shadow: 0 12px 26px rgba(6, 33, 101, 0.14);
}
.cat__art {
  height: 105px;
  display: grid;
  place-items: center;
}
.cat__art img { max-height: 105px; width: auto; }
.cat__name {
  font-size: clamp(15px, 1.5vw, 20.1px);
  font-weight: 500;
  line-height: 1.15;
  margin-top: auto;
}
.cat__go {
  width: 38.7px; height: 40.5px;
  transition: transform 0.25s var(--ease);
}
.cat:hover .cat__go { transform: translateX(4px); }

/* ============================================================
   5 · Entérate de todo
   ============================================================ */
.enterate { padding-block: clamp(40px, 5.5vw, 60px) 0; }
.enterate__panel {
  display: grid;
  grid-template-columns: minmax(0, 829fr) minmax(0, 353fr);
  gap: clamp(24px, 3.5vw, 58px);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px);
  background: var(--lime-wash);
  border-radius: 31px;
}
.enterate__head {
  font-size: clamp(28px, 3.6vw, 47.7px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* Lista de artículos */
.post {
  display: grid;
  grid-template-columns: 229px minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 29px);
  align-items: center;
  padding-block: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid rgba(48, 48, 48, 0.5);
}
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post:first-child { padding-top: 0; }
.post__thumb {
  aspect-ratio: 229 / 145;
  width: 100%;
  /* height:auto es obligatorio: el atributo height="" del HTML es un presentational
     hint que si no, gana sobre aspect-ratio y estira la foto. */
  height: auto;
  object-fit: cover;
  border-radius: var(--r-2xl);
  transition: transform 0.4s var(--ease);
}
.post:hover .post__thumb { transform: scale(1.03); }
.post__title {
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 8px;
  transition: color 0.2s var(--ease);
}
.post:hover .post__title { color: var(--steel); }
.post__excerpt {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.15;  /* Figma: 20px / 23px — tenía 1.4 y estiraba 20px por artículo */
  color: var(--ink);
}

/* Columna derecha — Próximos eventos */
.events__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(20px, 1.9vw, 24.7px);
  font-weight: 700;
  line-height: 1.065;  /* Figma: 24.7px / 26.3px */
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.events__head img { width: 36px; height: 35px; }
.events { display: grid; gap: 15px; }

.event {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) 99px;
  gap: 12px;
  align-items: center;
  min-height: 139px;
  padding: 25px 18px;
  background: var(--white);
  border: 1px solid var(--lime);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(6, 33, 101, 0.16); }
.event__date {
  display: grid;
  place-items: center;
  align-content: center;
  width: 47px; height: 47px;
  background: var(--lime-soft);
  border-radius: 9px;
  color: #000;
  line-height: 1;
}
.event__date .m { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.event__date .d { font-size: 19.3px; font-weight: 700; }
.event__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.11;
  color: var(--steel);
}
.event__thumb {
  width: 99px; height: 88px;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Newsletter (se reusa en el footer) */
.news {
  padding: 16px 18px;
  background: var(--navy);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  color: var(--white);
}
.news__top { display: flex; align-items: flex-start; gap: 12px; }
.news__top img { width: 59px; height: 64px; flex-shrink: 0; }
.news__title { font-size: 15.7px; font-weight: 700; margin-bottom: 5px; }
.news__copy { font-size: 13.6px; font-weight: 300; line-height: 1.24; }
.news__form { display: flex; gap: 8px; margin-top: 12px; }
.news__form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26.8px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
  text-align: center;
}
.news__form input:focus { outline: 2px solid var(--lime); }
.news__form button {
  flex-shrink: 0;
  height: 26.8px;
  padding-inline: 14px;
  background: var(--lime);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: filter 0.2s var(--ease), transform 0.18s var(--ease);
}
.news__form button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ============================================================
   6 · Banner Bofish
   ============================================================ */
.bofish { padding-block: clamp(36px, 5vw, 52px) 0; }
.bofish__banner {
  /* el Figma da 1273 a este banner, no los 1285 del contenedor */
  max-width: 1273px;
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 208px;
  /* la fila del CTA la manda el logo (64px), no el botón (48) — por eso el padding
     va más corto que lo que sugeriría el botón solo */
  padding: 20px clamp(20px, 3vw, 44px) 18px;
  background: var(--steel) url('assets/bofish-banner-bg.webp') center / cover no-repeat;
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
}
.bofish__photos {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(58%, 760px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.bofish__domos {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.bofish__carlos {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 158px; height: 158px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 12.6px rgba(0, 0, 0, 0.3));
}
.bofish__copy { position: relative; z-index: 1; max-width: 620px; }
.bofish__copy h2 {
  font-size: clamp(24px, 2.9vw, 41px);
  font-weight: 700;
  line-height: 1.073;  /* Figma: 41px / 44px */
  color: var(--white);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.bofish__copy h2 em { color: var(--lime); font-style: normal; }
.bofish__cta { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.bofish__logo { width: 164px; height: auto; }

/* Botón sólido grande (Inscríbete / Compra aquí) */
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding-inline: 26px;
  border-radius: 24px;
  font-size: clamp(18px, 1.8vw, 25.3px);
  font-weight: 500;
  color: var(--white);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn-solid img { width: 31px; height: 31px; }
.btn-solid--navy  { background: var(--navy); }
.btn-solid--steel { background: var(--steel); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(6, 33, 101, 0.3); filter: brightness(1.06); }

/* ============================================================
   7 · Videos más recientes
   ============================================================ */
.videos { padding-block: clamp(40px, 5.5vw, 60px) 0; }
.videos__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2.5vw, 26px);
}
.videos__nav {
  position: absolute;
  right: 0;
  display: flex;
  gap: 12px;
}
.videos__nav button { width: 48px; height: 48px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.videos__nav button:hover:not(:disabled) { transform: scale(1.08); }
.videos__nav button:disabled { opacity: 0.35; cursor: default; }

.videos__track {
  max-width: 1279px;  /* Figma */
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 25px) / 4);
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.videos__track::-webkit-scrollbar { display: none; }

.vcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--lime-wash);
  border-radius: var(--r-lg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.vcard:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(6, 33, 101, 0.14); }
.vcard__thumb {
  position: relative;
  aspect-ratio: 256 / 167;
  border-radius: 12.2px;
  overflow: hidden;
}
/* :not(.vcard__play) es necesario — si no, esta regla gana por especificidad
   sobre .vcard__play y el botón de play se estira a todo el thumbnail. */
.vcard__thumb img:not(.vcard__play) { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.vcard:hover .vcard__thumb img:not(.vcard__play) { transform: scale(1.05); }
.vcard__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: auto;
  transition: transform 0.25s var(--ease);
}
.vcard:hover .vcard__play { transform: translate(-50%, -50%) scale(1.12); }
.vcard__tag {
  align-self: flex-start;
  margin-top: 12px;
  height: 20px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  background: var(--lime);
  border-radius: 10px;
  color: var(--white);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vcard__title {
  margin-top: 9px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}

.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
}
.dots button {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--mist);
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.dots button.is-active { width: 32px; background: var(--lime); }

/* ============================================================
   8 · Banner venta
   ============================================================ */
.venta { padding-block: clamp(36px, 5vw, 52px) 0; }
.venta__banner {
  max-width: 1267px;  /* Figma */
  margin-inline: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 12px;
  min-height: 327px;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 49px);
  background: linear-gradient(180deg, var(--mist) 63.5%, var(--steel) 164.5%);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.venta__copy h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 14px;
}
.venta__copy p {
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.29;
  color: var(--ink);
  max-width: 520px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.venta__art { justify-self: end; align-self: center; }
.venta__art img { width: 100%; max-width: 730px; height: auto; }

/* ============================================================
   9 · Aliados
   ============================================================ */
.aliados { padding-block: clamp(44px, 6vw, 66px) 0; }
.aliados__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 19px);
  max-width: 1173px;
  margin: clamp(20px, 3vw, 32px) auto 0;
}
.aliado {
  display: flex;
  flex-direction: column;
  /* Altura FIJA (no min-height): el grid iguala las 4 tarjetas a la más alta y ese
     sobrante se colaba entre el logo y el bloque navy, corriéndolo hacia abajo y
     rompiendo la proporción 159/165 del Figma. */
  height: 324px;
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 37px;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.aliado:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(6, 33, 101, 0.2); }
.aliado__logo {
  /* fijo: si crece, los bloques navy de los 4 aliados no arrancan a la misma altura */
  flex: 0 0 159px;
  display: grid;
  place-items: center;
  padding: 18px 24px;
}
/* Los 4 logos van de ratio 0.77 (CAY, vertical) a 4.98 (AQPE, wordmark largo).
   Con una sola regla el apaisado se come la tarjeta y el vertical se ve diminuto,
   así que cada uno lleva su ancho óptico (--lw). Los PNG ya vienen recortados
   sin aire, si no el espacio vacío horneado desbalancea otra vez. */
.aliado__logo img {
  width: var(--lw, 180px);
  max-width: 100%;
  height: auto;
  max-height: 92px;
  object-fit: contain;
}
.aliado--bofish   .aliado__logo img { --lw: 180px; }
/* AQPE a medida exacta de Gina (243×47) — 12px más ancho de lo que cabía con el
   padding lateral de 24px, así que ese logo lleva padding lateral más corto (18px)
   sólo en su tarjeta para que quepa sin recortarse. */
.aliado--aqpe .aliado__logo { padding-left: 18px; padding-right: 18px; }
.aliado--aqpe .aliado__logo img { width: 243px; max-width: none; height: 47px; max-height: none; }
.aliado--sibiolat .aliado__logo img { --lw: 175px; }
.aliado--cay      .aliado__logo img { --lw: 72px; }
.aliado__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* flex:1 = se queda con exactamente lo que sobra de los 324 tras el logo (159) → 165 */
  flex: 1 1 auto;
  /* padding lateral corto: el Figma le da 250px de ancho al texto dentro de una
     tarjeta de 279; con 16px de cada lado caía una línea de más y desbordaba. */
  padding: 16px 10px 12px;
  background: var(--navy);
  text-align: center;
}
.aliado__body p {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
}
.aliado__go { width: 38.7px; height: 40.5px; margin-top: auto; align-self: flex-end; transition: transform 0.25s var(--ease); }
.aliado:hover .aliado__go { transform: translateX(4px); }

/* ============================================================
   10 · Footer
   ============================================================ */
.footer { margin-top: clamp(44px, 6vw, 72px); background: var(--navy); color: var(--white); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 1440px;
  margin-inline: auto;
  padding: 18px clamp(20px, 6vw, 89px) 30px;
}
.footer__logo { font-size: clamp(26px, 2.6vw, 37px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; }
.footer__logo span { color: var(--lime); }
.footer__about { font-size: 17.9px; font-weight: 400; line-height: 1.18; max-width: 300px; }
.footer h3 { font-size: 22.4px; font-weight: 600; line-height: 1.442; margin-bottom: 6px; }
.footer__links li a,
.footer__contact a {
  display: inline-block;
  padding-block: 3px;
  font-size: 18.3px;
  font-weight: 400;
  transition: color 0.2s var(--ease);
}
.footer__links li a:hover, .footer__contact a:hover { color: var(--lime); }
.footer .news {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px clamp(20px, 6vw, 89px);
  background: rgba(0, 0, 0, 0.15);
  /* la pleca oscura se cortaba en los 1440px del contenedor: en pantallas más
     anchas quedaban franjas de navy liso a los costados. box-shadow spread la
     extiende a todo el ancho del viewport sin tocar el ancho/centrado del
     contenido (body ya trae overflow-x:hidden, así que no genera scroll). */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.15);
  font-size: 18.3px;
  font-weight: 700;
}
.footer__legal nav { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--lime); }

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

/* — Laptop chica: el menú se compacta — */
@media (max-width: 1180px) {
  .nav__links { gap: 6px; }
  .nav__links a { font-size: 16px; }
  .btn-account span, .btn-signin span { display: none; }
  .btn-account, .btn-signin { padding-inline: 12px; }
  .categorias__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .videos__track { grid-auto-columns: calc((100% - 2 * 25px) / 3); }
}

/* — Tablet — */
@media (max-width: 960px) {
  .nav__toggle { display: flex; }
  .nav__divider { display: none; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 5vw, 36px) 18px;
    background: var(--white);
    box-shadow: var(--shadow-nav);
    display: none;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { font-size: 19px; padding: 12px 0; border-bottom: 1px solid rgba(6, 33, 101, 0.1); }
  .nav__links a::after { display: none; }
  .nav__inner { position: relative; min-height: 78px; }
  .nav__actions { margin-left: auto; }

  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__copy { padding-bottom: 0; }
  .hero__art { justify-self: center; max-width: 420px; margin-bottom: 0; }
  .search { width: 100%; }

  .descubre__grid { grid-template-columns: 1fr; }
  .descubre__side { grid-template-rows: auto auto; }

  .enterate__panel { grid-template-columns: 1fr; }
  .aliados__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos__track { grid-auto-columns: calc((100% - 25px) / 2); }
  .videos__head { flex-direction: column; gap: 16px; }
  .videos__nav { position: static; }

  .venta__banner { grid-template-columns: 1fr; text-align: left; }
  .venta__art { justify-self: center; }

  .bofish__banner { flex-direction: column; align-items: flex-start; }
  .bofish__photos { width: 100%; opacity: 0.4; }
  .bofish__domos { -webkit-mask-image: none; mask-image: none; }
  .bofish__carlos { display: none; }

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

/* — Móvil — */
@media (max-width: 620px) {
  /* El buscador no cabe en una fila a 390px: se reacomoda en dos,
     input arriba y "Categorías + Buscar" abajo. Nada se recorta. */
  .search {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 14px;
    row-gap: 10px;
  }
  .search__input { flex: 1 0 100%; height: 34px; font-size: 16px; }
  .search__sep { display: none; }
  .search__cat { margin-right: auto; }
  .search__btn { height: 34px; padding-inline: 20px; }

  .categorias__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cat { min-height: 200px; padding: 16px 10px 14px; }
  .cat__art { height: 78px; }
  .cat__art img { max-height: 78px; }

  .videos__track { grid-auto-columns: 84%; }

  .post { grid-template-columns: 1fr; gap: 12px; }
  .post__thumb { max-width: 100%; }

  .event { grid-template-columns: 47px minmax(0, 1fr); }
  .event__thumb { display: none; }

  .mcard__title { max-width: 78%; left: 18px; }
  .playbtn { width: 64px; }

  .aliados__grid { grid-template-columns: 1fr; }
  /* en móvil la altura fija no aplica: el texto necesita reflowear */
  .aliado { height: auto; min-height: 0; }
  .aliado__logo { flex: 0 0 130px; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; }
}

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