:root {
    --verde-neon: #c6ff2e;
    --verde-neon-dim: #9fd424;
    --gris-950: #131315;
    --gris-900: #1b1b1e;
    --gris-800: #29292d;
    --gris-400: #9a9aa2;
    --morado: #9b7bff;
    --blanco: #f7f7f5;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  * { box-sizing: inherit; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  html, body {
    min-height: 100%;
    margin: 0;
    background: #000;
    color: var(--blanco);
    font-family: "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
  }
  @media (max-width: 860px) {
    html, body { background: #000; }
  }


  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
  }
  .site-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px;
  }
  .site-header img {
    height: 40px;
    width: auto;
    display: block;
  }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .site-nav a {
    color: #cfcbe0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 200ms ease;
  }
  .site-nav a:hover { color: var(--verde-neon); }
  .site-nav .nav-cta {
    background: var(--verde-neon);
    color: #12200a;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 700;
  }
  .site-nav .nav-cta:hover { color: #12200a; opacity: 0.9; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .nav-links .nav-cta-mobile { display: none; }
  .nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #f7f7f5;
    border-radius: 2px;
    position: relative;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-toggle span::before,
  .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .site-header-inner.is-open .nav-toggle span { background: transparent; }
  .site-header-inner.is-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
  .site-header-inner.is-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
  @media (max-width: 760px) {
    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      background: rgba(19,19,21,0.98);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 10px 24px 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-links a {
      padding: 12px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-links.is-open { display: flex; }
    .nav-links .nav-cta-mobile {
      display: inline-block;
      margin-top: 10px;
      text-align: center;
      background: var(--verde-neon);
      color: #12200a !important;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 700;
      border-bottom: none;
    }
    .site-nav > .nav-cta { display: none; }
    .nav-toggle { display: flex; }
  }

  .stage {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px 24px;
  }


  .casos {
    padding: 56px 24px 64px;
    background: #EAF9C7;
  }
  .casos-inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .casos-head {
    max-width: 60ch;
    margin: 0 0 32px;
  }
  .casos-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9B7BFF;
    font-weight: 700;
    margin: 0 0 10px;
  }
  .casos-title {
    font-size: clamp(32px, 4.6vw, 50px);
    font-weight: 800;
    color: #131315;
    margin: 0 0 10px;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .casos-sub {
    font-size: 15px;
    color: #6B6B72;
    margin: 0;
  }
  .casos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  @media (max-width: 900px) {
    .casos-grid { grid-template-columns: 1fr; }
  }
  .caso-card {
    border: 1px solid #E7E5DF;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .caso-thumb {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    background: #131315;
  }
  .caso-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .caso-pill {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: #EEFFC2;
    color: #3C5200;
    font-size: 11.5px;
    font-weight: 700;
  }
  .caso-name {
    font-size: 18px;
    font-weight: 700;
    color: #131315;
    line-height: 1.25;
  }
  .caso-field-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9B7BFF;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .caso-field-text {
    font-size: 13px;
    color: #33333a;
    line-height: 1.5;
  }
  .caso-result {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #E7E5DF;
  }
  .caso-result .caso-field-label { color: #3C5200; }
  .caso-note {
    font-size: 11px;
    color: #9a9aa2;
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
  }
  .caso-card { cursor: zoom-in; transition: transform 180ms ease, box-shadow 180ms ease; }
  .caso-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.08); }
  .caso-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,12,0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 24px;
    cursor: zoom-out;
  }
  .caso-modal-overlay.is-open { display: flex; }
  .caso-modal {
    background: #ffffff;
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    cursor: auto;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  }
  .caso-modal .caso-thumb { height: 280px; border-radius: 20px 20px 0 0; }
  .caso-modal .caso-body { padding: 32px; gap: 16px; }
  .caso-modal .caso-name { font-size: 24px; }
  .caso-modal .caso-field-text { font-size: 15px; line-height: 1.6; }
  .caso-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(19,19,21,0.85);
    color: #fff;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 600px) {
    .caso-modal .caso-thumb { height: 180px; }
    .caso-modal .caso-body { padding: 22px; }
    .caso-modal .caso-name { font-size: 20px; }
  }



  .contacto {
    padding: 52px 24px 60px;
    background:
      radial-gradient(120% 90% at 85% 0%, rgba(198,255,46,0.08) 0%, transparent 45%),
      linear-gradient(155deg, #1a0f2b 0%, #131315 60%, #0d0712 100%);
    position: relative;
    overflow: hidden;
  }
  .contacto-inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .contacto-head {
    text-align: center;
    margin: 0 0 28px;
  }
  .contacto-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--verde-neon);
    font-weight: 700;
    margin: 0 0 10px;
  }
  .contacto-title {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 800;
    color: var(--blanco);
    margin: 0 0 10px;
    line-height: 1.15;
  }
  .contacto-sub {
    font-size: 13.5px;
    color: var(--gris-400);
    margin: 0;
  }
  .contacto-form {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 640px) {
    .contacto-form { grid-template-columns: 1fr; padding: 18px; }
  }
  .contacto-field { display: flex; flex-direction: column; gap: 4px; }
  .contacto-field.full { grid-column: 1 / -1; }
  .contacto-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: #b9b6c4;
  }
  .contacto-field input,
  .contacto-field textarea {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13px;
    color: var(--blanco);
    font-family: inherit;
    outline: none;
    transition: border-color 200ms ease;
  }
  .contacto-field input::placeholder,
  .contacto-field textarea::placeholder { color: #77758a; }
  .contacto-field input:focus,
  .contacto-field textarea:focus { border-color: var(--verde-neon); }
  .contacto-field textarea { resize: vertical; min-height: 64px; }
  .contacto-privacy {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: #9a97ab;
    line-height: 1.4;
  }
  .contacto-privacy input { margin-top: 2px; }
  .contacto-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
  }
  .contacto-submit {
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 999px;
    cursor: pointer;
    background: var(--verde-neon);
    color: #12200a;
    transition: transform 220ms ease;
  }
  .contacto-submit:hover { transform: translateY(-2px) scale(1.02); }
  .contacto-alt {
    font-size: 13.5px;
    color: #b9b6c4;
  }
  .contacto-alt a { color: var(--verde-neon); font-weight: 700; text-decoration: none; }
  .contacto-note {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #77758a;
    text-align: center;
    margin-top: 6px;
  }

  .site-footer {
    background: #2E1065;
    color: #cfcbe0;
    padding: 48px 24px 28px;
  }
  .footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 0.75fr 0.8fr 1fr;
    gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  @media (max-width: 700px) {
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  }
  .footer-brand {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    color: var(--blanco);
    margin: 0 0 10px;
  }
  .footer-brand span { color: var(--verde-neon); }
  @media (max-width: 700px) { .footer-badge .footer-col-title { display: none; } }
  .footer-hl { color: var(--verde-neon); font-weight: 700; }
  .footer-tagline {
    font-size: 15.5px;
    color: #9a97ab;
    max-width: 34ch;
    line-height: 1.5;
  }
  .footer-col-title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #77758a;
    font-weight: 700;
    margin: 0 0 14px;
  }
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-links a {
    color: #cfcbe0;
    text-decoration: none;
    font-size: 14px;
  }
  .footer-links a:hover { color: var(--verde-neon); }
  .footer-social {
    display: flex;
    gap: 12px;
  }
  .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfcbe0;
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
  }
  .footer-social a:hover { border-color: var(--verde-neon); color: var(--verde-neon); }
  .footer-social svg { width: 16px; height: 16px; fill: currentColor; }
  .footer-bottom {
    max-width: 1180px;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #77758a;
  }
  .footer-bottom a { color: #77758a; text-decoration: none; }
  .footer-bottom a:hover { color: var(--verde-neon); }

  .heroes {
    padding: 56px 24px 64px;
    background: #28235B;
  }
  .heroes-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  @media (max-width: 860px) {
    .heroes-inner { grid-template-columns: 1fr; }
  }
  .heroes-photo {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
  }
  .heroes-photo img {
    width: 100%;
    display: block;
  }
  .heroes-content {
    display: flex;
    flex-direction: column;
  }
  .heroes-logo {
    height: 208px;
    width: auto;
    margin-bottom: 22px;
    display: block;
    order: 0;
  }
  .heroes-greenline {
    order: -2;
    color: var(--verde-neon);
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 16px;
  }
  .heroes-pill {
    order: -3;
    align-self: flex-start;
    margin-bottom: 10px;
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #C9C6E8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
  }
  .heroes-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.25;
  }
  .heroes-text {
    font-size: 15px;
    color: #D6D3EE;
    line-height: 1.65;
    margin: 0 0 22px;
  }
  .heroes-quote {
    font-size: 17px;
    font-style: italic;
    color: #ffffff;
    border-left: 3px solid #ffffff;
    padding-left: 16px;
    margin: 0;
  }
  .heroes-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--verde-neon);
    color: #12200a;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
  }
  .heroes-download:hover { transform: translateY(-2px); }
  .heroes-download svg { width: 16px; height: 16px; }


  #logoPet {
    position: fixed;
    left: 0;
    top: 0;
    width: 70px;
    height: auto;
    pointer-events: none;
    z-index: 40;
    opacity: 0;
    transition: opacity 320ms ease;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35));
    will-change: transform, opacity;
  }
  #logoPet.is-visible { opacity: 1; }
  @media (max-width: 860px), (pointer: coarse) {
    #logoPet { display: none !important; }
  }

  .logo-wall {
    padding: 44px 24px 52px;
    background: var(--blanco);
  }
  .logo-wall-inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .logo-tile {
    flex: 0 0 calc(100%/6 - 14px * 5/6);
  }
  @media (max-width: 900px) {
    .logo-tile { flex-basis: calc(100%/4 - 14px * 3/4); }
  }
  @media (max-width: 560px) {
    .logo-tile { flex-basis: calc(100%/3 - 14px * 2/3); }
  }
  .logo-tile {
    background: #FAF9F6;
    border: 1px solid #ECEAE3;
    border-radius: 12px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  }
  .logo-tile:hover {
    background: #ffffff;
    border-color: var(--verde-neon);
    transform: translateY(-2px);
  }
  .logo-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 250ms ease, opacity 250ms ease;
  }
  .logo-tile:hover img,
  .logo-tile:active img {
    filter: grayscale(0);
    opacity: 1;
  }
  @media (hover: none) {
    .logo-tile img { filter: grayscale(0.6); opacity: 0.85; }
  }


  .elbook {
    padding: 56px 0 64px;
    background: #FAF9F6;
    overflow: hidden;
  }
  .elbook-head {
    max-width: 1180px;
    margin: 0 auto 28px;
    padding: 0 24px;
  }
  .elbook-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9B7BFF;
    font-weight: 700;
    margin: 0 0 10px;
  }
  .elbook-title {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    color: #131315;
    margin: 0 0 10px;
    line-height: 1.15;
  }
  .elbook-sub {
    font-size: 15px;
    color: #6B6B72;
    margin: 0;
  }
  .accordion {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 8px;
    height: 460px;
  }
  .acc-panel {
    position: relative;
    flex: 0.55;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #131315;
    transition: flex 550ms cubic-bezier(0.4,0,0.2,1);
  }
  .acc-panel.is-active { flex: 12; }
  .acc-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 350ms ease;
  }
  .acc-panel.is-active img { opacity: 1; }
  .acc-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 45%);
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .acc-panel.is-active::after { opacity: 1; }
  .acc-caption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    right: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .acc-panel:not(.is-active) .acc-caption {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    left: 50%;
    right: auto;
    bottom: 16px;
    top: 16px;
    transform-origin: center;
    text-align: left;
    font-size: 12.5px;
    color: rgba(255,255,255,0.85);
    margin-left: -8px;
    white-space: normal;
  }
  @media (max-width: 859px) {
    .accordion { flex-direction: column; height: auto; padding: 0 20px; }
    .acc-panel { flex: none; height: 46px; transition: height 450ms cubic-bezier(0.4,0,0.2,1); }
    .acc-panel.is-active { flex: none; height: 300px; }
    .acc-panel:not(.is-active) .acc-caption {
      writing-mode: horizontal-tb;
      transform: none;
      left: 14px; right: 14px; top: auto; bottom: 14px;
      font-size: 13px;
      margin-left: 0;
    }
  }

  .acc-panel.acc-cover {
    background: linear-gradient(155deg, #2a1240 0%, #1a0f2b 45%, #0d0712 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .acc-cover-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 0 12px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 350ms ease 100ms, transform 350ms ease 100ms;
  }
  .acc-panel.acc-cover.is-active .acc-cover-inner {
    opacity: 1;
    transform: scale(1);
  }
  .acc-cover-emoji { font-size: 44px; line-height: 1; }
  .acc-cover-text {
    font-size: 20px;
    font-weight: 800;
    color: var(--blanco);
    line-height: 1.3;
  }
  @media (max-width: 859px) {
    .acc-cover-emoji { font-size: 30px; }
    .acc-cover-text { font-size: 15px; }
    .acc-cover-inner { gap: 8px; }
  }

  .elbook-cta {
    max-width: 1180px;
    margin: 32px auto 0;
    padding: 0 24px;
    display: flex;
    justify-content: center;
  }
  .elbook-btn {
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 28px;
    border-radius: 999px;
    cursor: pointer;
    background: var(--verde-neon);
    color: #12200a;
    transition: transform 220ms ease;
  }
  .elbook-btn:hover { transform: translateY(-2px) scale(1.02); }

  .claim {
    padding: 56px 24px;
    background: #131315;
    text-align: center;
  }
  .claim-inner {
    max-width: 940px;
    margin: 0 auto;
  }
  .claim-text {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 300;
    line-height: 1.35;
    color: var(--blanco);
    margin: 0 0 16px;
  }
  .claim-text strong {
    font-weight: 800;
    color: var(--blanco);
  }
  .claim-text .claim-ia {
    font-weight: 800;
    color: var(--verde-neon);
  }
  .claim-br { display: block; }
  @media (max-width: 700px) { .claim-br { display: inline; } }
  .claim-sub {
    font-size: 21px;
    font-weight: 400;
    color: var(--blanco);
    margin: 0;
  }
  .claim-sub strong {
    font-weight: 800;
    color: #9333EA;
    text-transform: uppercase;
    font-size: 1.25em;
  }

  .cosecha {
    padding: 56px 24px 64px;
    background: #FAF9F6;
    color: #131315;
  }
  .cosecha-inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .cosecha-title {
    text-align: center;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    color: #5C8A00;
    margin: 0 0 36px;
  }
  .cosecha-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
  }
  @media (max-width: 900px) {
    .cosecha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .cosecha-grid { grid-template-columns: 1fr; }
  }
  .cosecha-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cosecha-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(92,138,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cosecha-icon svg {
    width: 30px;
    height: 30px;
    stroke: #5C8A00;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cosecha-headline {
    font-size: 19px;
    font-weight: 700;
    color: #131315;
    line-height: 1.35;
    max-width: 30ch;
  }
  .cosecha-headline em {
    font-style: normal;
    color: #5C8A00;
  }
  .cosecha-desc {
    font-size: 13.5px;
    color: #6B6B72;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0;
  }
  .sustancias {
    padding: 56px 24px 64px;
    background:
      radial-gradient(120% 90% at 15% 0%, rgba(198,255,46,0.10) 0%, transparent 45%),
      linear-gradient(155deg, #2a1240 0%, #1a0f2b 45%, #0d0712 100%);
    color: var(--blanco);
    position: relative;
    overflow: hidden;
  }
  .sustancias::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 26px);
    pointer-events: none;
  }
  .sustancias-inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .sustancias-head {
    max-width: 60ch;
    margin: 0 0 32px;
  }
  .sustancias-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--verde-neon);
    font-weight: 700;
    margin: 0 0 10px;
  }
  .sustancias-title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    line-height: 1.1;
    color: var(--blanco);
  }
  .sustancias-title em {
    font-style: normal;
    color: var(--verde-neon);
  }
  .sustancias-sub {
    font-size: 16px;
    color: #b9b6c4;
    line-height: 1.55;
    margin: 0;
  }
  .sustancias-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  @media (max-width: 900px) {
    .sustancias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .sustancias-grid { grid-template-columns: 1fr; }
  }
  .sustancia-card {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  }
  .sustancia-card:hover {
    transform: translateY(-4px);
    border-color: var(--verde-neon);
    background: rgba(198,255,46,0.06);
  }
  .sustancia-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px dashed var(--verde-neon);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(198,255,46,0.06);
  }
  .sustancia-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--verde-neon);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sustancia-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--blanco);
  }
  .sustancia-name span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b98bff;
    margin-bottom: 4px;
  }
  .sustancia-desc {
    font-size: 13.5px;
    color: #a9a5b6;
    line-height: 1.55;
    margin: 0;
  }
  .logo-wall .logo-label {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6B6B72;
    font-weight: 700;
    margin: 0 0 28px;
  }
  .logo-wall img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
  }

  .hero {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 24px;
  }

  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; text-align: center; }
    .cta-row { justify-content: center; }
    .mascot-wrap { margin: 0 auto; }
    .mascot-float { width: min(42vw, 190px); margin: 0 auto; }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--verde-neon);
    font-weight: 700;
    margin: 0 0 18px;
  }
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--verde-neon);
    display: inline-block;
  }

  h1 {
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    font-weight: 800;
  }
  h1 span { color: var(--verde-neon); }

  .sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--gris-400);
    max-width: 46ch;
    margin: 0 0 32px;
  }
  @media (max-width: 860px) { .sub { margin-left: auto; margin-right: auto; } }

  .cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .btn {
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  }
  .btn:focus-visible { outline: 2px solid var(--verde-neon); outline-offset: 3px; }
  .btn-primary {
    background: var(--verde-neon);
    color: #12200a;
    box-shadow: 0 0 0 0 rgba(198,255,46,0.5);
  }
  .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 30px -8px rgba(198,255,46,0.55); }
  .btn-secondary {
    background: transparent;
    color: var(--blanco);
    border: 1px solid var(--gris-800);
  }
  .btn-secondary:hover { transform: translateY(-2px); border-color: var(--morado); color: var(--morado); }

  .mascot-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 550px;
  }

  .mascot-glow {
    position: absolute;
    width: 120%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155,123,255,0.55) 0%, rgba(198,255,46,0.30) 42%, rgba(198,255,46,0) 72%);
    filter: blur(18px);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
  }

  .mascot-float {
    position: relative;
    z-index: 1;
    width: min(74vw, 380px);
  }
  .mascot-float::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: none;
    filter: none;
    z-index: 0;
    pointer-events: none;
  }

  .mascot-tilt {
    position: relative;
    z-index: 1;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 160ms ease-out;
    will-change: transform;
  }

  .mascot-tilt img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }
  .mascot-video-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 53%, #000 42%, rgba(0,0,0,0.85) 58%, rgba(0,0,0,0.4) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 74% at 50% 53%, #000 42%, rgba(0,0,0,0.85) 58%, rgba(0,0,0,0.4) 76%, transparent 100%);
  }
  .mascot-video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128%;
    height: 128%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }

  .mascot-shine {
    position: absolute;
    inset: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(115deg, transparent 35%, rgba(198,255,46,0.55) 47%, rgba(255,255,255,0.75) 50%, rgba(155,123,255,0.55) 53%, transparent 65%);
    background-size: 300% 300%;
    mix-blend-mode: overlay;
    pointer-events: none;
    will-change: background-position;
  }

  /* eye overlays, positioned in % of the image box (aspect ratio 733:949) */
  .eye-box {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .eye-cover {
    position: absolute;
    width: 3.1%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #241a10 0%, #0c0803 70%, #050301 100%);
    transform: translate(-50%, -50%);
  }
  .eye-glint {
    position: absolute;
    width: 1.55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffffff 45%, rgba(255,255,255,0) 75%);
    transform: translate(-50%, -50%);
    transition: left 90ms linear, top 90ms linear;
    will-change: left, top;
  }

  .eye-cover.left  { left: 41.47%; top: 31.19%; }
  .eye-cover.right { left: 67.53%; top: 29.93%; }

  .caption {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--gris-400);
  }
  .caption b { color: var(--verde-neon); }

  @keyframes bob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-16px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mascot-float { animation: none; }
    .mascot-tilt { transition: none; }
    .eye-glint { transition: none; }
  }
  .contacto-captcha{grid-column:1/-1;margin:4px 0 2px;min-height:65px}


/* ===== Kinetic titles ===== */
.kt .kw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .12em;margin:0 -.02em -.12em}
.kt .kw-i{display:inline-block;transform:translate3d(0,112%,0) rotate(7deg);transform-origin:0 100%;
  transition:transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--d,0) * 65ms)}
.kt.is-in .kw-i{transform:none}
.kt .kt-acc{position:relative;display:inline-block}
.kt .kt-acc::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;border-radius:2px;
  background:var(--verde-neon);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--ad,0) * 65ms + 450ms)}
.kt.is-in .kt-acc::after{transform:scaleX(1)}
.cosecha-title.kt .kt-acc::after,.elbook-title.kt .kt-acc::after{background:#9B7BFF}

.kt .kw,.kt .kw-i,.kt .kw-g{color:inherit}
/* eyebrows */
.kt-eb{opacity:0;letter-spacing:.6em !important;transition:opacity .9s ease,letter-spacing 1.1s cubic-bezier(.19,1,.22,1)}
.kt-eb.is-in{opacity:1;letter-spacing:.14em !important}

/* staggered blocks */
.rv{opacity:0;transform:translate3d(0,34px,0) scale(.98);
  transition:opacity .8s ease,transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--s,0) * 90ms)}
.rv.is-in{opacity:1;transform:none}

/* claim scroll-scrub */
.claim-text .cw{opacity:.14;transition:opacity .35s ease,filter .35s ease;filter:blur(1.5px)}
.claim-text .cw.on{opacity:1;filter:none}
.claim-sub.rv{transition-delay:.1s}

/* ===== Book: 3D coverflow ===== */
.elbook{background:#0c0b10 !important;position:relative;padding:80px 0 72px !important}
.elbook::before{content:"BOOK";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:min(34vw,460px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(198,255,46,.10);pointer-events:none;white-space:nowrap;letter-spacing:-.02em}
.elbook-head{position:relative;z-index:1;text-align:center}
.elbook-title{color:var(--blanco) !important;max-width:900px;margin-left:auto !important;margin-right:auto !important}
.elbook-sub{color:#9a9aa2 !important}
.bk{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px;outline:none}
.bk-stage{position:relative;height:calc(min(760px,78vw) * .5625 + 40px);perspective:1600px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.bk-stage.is-drag{cursor:grabbing}
.bk-card{position:absolute;left:50%;top:20px;width:min(760px,78vw);aspect-ratio:16/9;margin:0 0 0 calc(min(760px,78vw) / -2);
  border-radius:16px;overflow:hidden;background:var(--bg,#15171c);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  transition:transform .85s cubic-bezier(.19,1,.22,1),opacity .6s ease,filter .6s ease;will-change:transform;cursor:pointer}
.bk-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transform:scale(1.08);
  transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.bk-card.is-cover img{object-fit:contain}
.bk-card.is-active{cursor:zoom-in;box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 0 1px rgba(198,255,46,.25)}
.bk-card.is-active img{transform:scale(1)}
.bk-card .bk-zoom{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);
  transition:opacity .3s ease .3s,transform .4s cubic-bezier(.19,1,.22,1) .3s}
.bk-card.is-active .bk-zoom{opacity:1;transform:none}
.bk-card .bk-zoom svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.bk-bar{display:flex;align-items:center;gap:28px;max-width:880px;margin:34px auto 0;padding:0 4px}
.bk-count{font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;display:flex;align-items:baseline;gap:6px;flex:none}
.bk-num{display:inline-block;height:1em;overflow:hidden;font-size:44px;line-height:1;color:var(--verde-neon)}
.bk-num span{display:block;animation:bkUp .7s cubic-bezier(.19,1,.22,1) both}
.bk-tot{font-size:15px;color:#9a9aa3}
.bk-name{flex:1;min-width:0;font-size:clamp(17px,2.2vw,24px);font-weight:800;color:var(--blanco);white-space:nowrap;overflow:hidden;line-height:1.25;padding-bottom:2px}
.bk-name .ch{display:inline-block;animation:bkUp .7s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--c) * 18ms)}
@keyframes bkUp{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.bk-nav{display:flex;gap:10px;flex:none}
.bk-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.bk-btn svg{width:20px;height:20px;stroke:#f7f7f5;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-btn:hover{background:var(--verde-neon);border-color:var(--verde-neon);transform:scale(1.06)}
.bk-btn:hover svg{stroke:#12200a}
.bk-prog{max-width:880px;margin:18px auto 0;height:3px;border-radius:3px;background:rgba(255,255,255,.1);display:flex;gap:4px;padding:0 4px}
.bk-prog i{flex:1;height:100%;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;cursor:pointer;position:relative}
.bk-prog i.done{background:rgba(198,255,46,.55)}
.bk-prog i.cur::after{content:"";position:absolute;inset:0;background:var(--verde-neon);transform-origin:0 50%;
  animation:bkFill var(--t,5s) linear both}
.bk.is-paused .bk-prog i.cur::after{animation-play-state:paused}
@keyframes bkFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.elbook-cta{position:relative;z-index:1;margin-top:40px !important}
#bkLightbox{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .35s ease;cursor:zoom-out}
#bkLightbox.open{opacity:1;pointer-events:auto}
#bkLightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;transform:scale(.92);transition:transform .5s cubic-bezier(.19,1,.22,1)}
#bkLightbox.open img{transform:none}
#bkLightbox .x{position:absolute;top:16px;right:22px;color:#fff;font-size:38px;line-height:1;font-family:sans-serif}
@media (max-width:760px){
  .elbook{padding:60px 0 56px !important}
  .bk{padding:0}
  .bk-stage{height:calc(84vw * .5625 + 28px);perspective:900px}
  .bk-card{width:84vw;margin-left:-42vw;top:14px;border-radius:12px}
  .bk-bar{gap:14px;margin-top:24px;padding:0 20px;flex-wrap:wrap}
  .bk-num{font-size:34px}
  .bk-name{order:3;flex-basis:100%;font-size:17px}
  .bk-nav{margin-left:auto}
  .bk-btn{width:42px;height:42px}
  .bk-prog{margin:16px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .kt .kw-i,.rv,.kt-eb,.bk-card,.bk-card img{transition:none !important}
  .kt .kw-i,.rv{transform:none;opacity:1}
  .kt-eb{opacity:1;letter-spacing:.14em !important}
  .claim-text .cw{opacity:1;filter:none}
  .bk-name .ch,.bk-num span{animation:none}
}

/* ===== Servicios: título en una línea en laptop ===== */
@media (min-width:861px){ .sustancias-head{max-width:none !important} .sustancias-title{white-space:nowrap} }

/* ===== Cosecha: fondo + íconos en loop ===== */
.cosecha{background:#FFFBD6 !important}
.cosecha-icon{position:relative;background:rgba(92,138,0,.12) !important}
.cosecha-icon::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(92,138,0,.35);
  animation:ckRing 3.2s cubic-bezier(.2,.7,.3,1) infinite;animation-delay:var(--ck,0s);pointer-events:none}
@keyframes ckRing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.55);opacity:0}}
.cosecha-icon svg *{transform-box:fill-box;transform-origin:center}
.cosecha-item:nth-child(1) .cosecha-icon svg circle{animation:ckPop 2.4s ease-in-out infinite}
.cosecha-item:nth-child(1) .cosecha-icon svg circle:nth-child(2){animation-delay:.25s}
.cosecha-item:nth-child(1) .cosecha-icon svg circle:nth-child(3){animation-delay:.5s}
@keyframes ckPop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.35)}}
.cosecha-item:nth-child(2) .cosecha-icon svg path{stroke-dasharray:40;animation:ckDraw 2.8s ease-in-out infinite}
.cosecha-item:nth-child(2) .cosecha-icon svg path:nth-child(2){animation-delay:.35s}
@keyframes ckDraw{0%{stroke-dashoffset:40}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
.cosecha-item:nth-child(3) .cosecha-icon svg{animation:ckBounce 2.6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes ckBounce{0%,55%,100%{transform:translateY(0)}20%{transform:translateY(-5px)}38%{transform:translateY(1px)}}
.cosecha-item:nth-child(4) .cosecha-icon svg path{animation:ckPlay 2.2s ease-in-out infinite}
@keyframes ckPlay{0%,100%{transform:scale(1) translateX(0)}50%{transform:scale(1.25) translateX(1px)}}
.cosecha-item:nth-child(5) .cosecha-icon svg{animation:ckSearch 3.4s ease-in-out infinite}
@keyframes ckSearch{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,-2px) rotate(-8deg)}50%{transform:translate(2px,-3px) rotate(4deg)}75%{transform:translate(3px,1px) rotate(8deg)}}
.cosecha-item:nth-child(6) .cosecha-icon svg rect{animation:ckGrid 2.8s ease-in-out infinite}
.cosecha-item:nth-child(6) .cosecha-icon svg rect:nth-child(2){animation-delay:.2s}
.cosecha-item:nth-child(6) .cosecha-icon svg rect:nth-child(4){animation-delay:.4s}
.cosecha-item:nth-child(6) .cosecha-icon svg rect:nth-child(3){animation-delay:.6s}
@keyframes ckGrid{0%,50%,100%{transform:scale(1);fill:transparent}22%{transform:scale(.7);fill:rgba(92,138,0,.35)}}
.cosecha-item:nth-child(2) .cosecha-icon{--ck:.5s}.cosecha-item:nth-child(3) .cosecha-icon{--ck:1s}
.cosecha-item:nth-child(4) .cosecha-icon{--ck:1.5s}.cosecha-item:nth-child(5) .cosecha-icon{--ck:2s}.cosecha-item:nth-child(6) .cosecha-icon{--ck:2.5s}

/* ===== Gota verde en la "o" de resultados ===== */
.kt.is-done .kw{overflow:visible}
.drip-o{position:relative;display:inline-block}
.drip{position:absolute;left:50%;top:var(--dt,.84em);width:.9em;height:2.8em;margin-left:-.45em;pointer-events:none;overflow:visible}
.drip svg{width:100%;height:100%;overflow:visible;display:block}
.drip .goo{filter:url(#lpGoo)}
.drip .bulge{transform-box:fill-box;transform-origin:50% 0;transform:scale(0)}
.drip .shine{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)}
.drip .drop{transform:translateY(0) scale(0);transform-box:fill-box;transform-origin:50% 50%}
.drip.go .bulge{animation:dpBulge 3.6s cubic-bezier(.45,0,.2,1) forwards}
.drip.go .drop{animation:dpDrop 3.6s forwards}
.drip.go .shine{animation:dpDrop 3.6s forwards}
@keyframes dpBulge{0%{transform:scale(0)}22%{transform:scale(1,1)}50%{transform:scale(.85,1.7)}64%{transform:scale(.7,.9)}82%{transform:scale(.5,.5)}100%{transform:scale(0)}}
@keyframes dpDrop{
  0%{transform:translateY(0) scale(0);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  22%{transform:translateY(8px) scale(.75)}
  46%{transform:translateY(24px) scale(.95,1.2);animation-timing-function:cubic-bezier(.5,0,.7,.4)}
  58%{transform:translateY(42px) scale(1,1.1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  84%{transform:translateY(200px) scale(.85,1.3);opacity:1}
  93%{transform:translateY(232px) scale(.8,1.35);opacity:0}
  100%{transform:translateY(232px) scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){ .drip{display:none} .cosecha-icon::after,.cosecha-icon svg,.cosecha-icon svg *{animation:none !important} }

/* ===== Servicios: tipografía + íconos animados ===== */
.sustancias-eyebrow{font-size:15px !important;margin-bottom:12px !important}
.sustancia-desc{font-size:14.5px !important}
.sustancia-icon{position:relative;width:68px !important;height:68px !important;border:none !important;background:rgba(198,255,46,.07) !important;
  transition:transform .4s cubic-bezier(.19,1,.22,1),background .3s ease}
.sustancia-icon .si-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--verde-neon);animation:siSpin 18s linear infinite}
.sustancia-card:hover .sustancia-icon{transform:scale(1.08);background:rgba(198,255,46,.14) !important}
.sustancia-card:hover .si-ring{animation-duration:4s}
@keyframes siSpin{to{transform:rotate(360deg)}}
.sustancia-icon svg{position:relative;width:38px !important;height:38px !important;stroke-width:1.6 !important;overflow:visible}
.sustancia-icon svg .i-solid{fill:#1d1429}
.sustancia-icon svg *{transform-box:fill-box;transform-origin:center}
/* 01 branding: badge floats & spins, star twinkles, rays flash */
.sustancia-icon .i-badge{animation:siFloat 3s ease-in-out infinite}
.sustancia-icon .i-burst{animation:siSpin 9s linear infinite}
.sustancia-icon .i-star{animation:siTwinkle 3s ease-in-out infinite}
.sustancia-card .i-rays{animation:siRays 3s ease-in-out infinite}
@keyframes siFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes siTwinkle{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.35) rotate(36deg)}}
@keyframes siRays{0%,100%{opacity:.25;transform:scale(.85)}40%,60%{opacity:1;transform:scale(1.08)}}
/* 02 marketing: chat pops, play blinks, megaphone shouts */
.sustancia-icon .i-chat{transform-origin:100% 100%;animation:siChat 3.2s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes siChat{0%,15%{transform:scale(0);opacity:0}30%,80%{transform:scale(1);opacity:1}92%,100%{transform:scale(0);opacity:0}}
.sustancia-icon .i-mega{transform-origin:0% 50%;animation:siMega 1.6s ease-in-out infinite}
@keyframes siMega{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg) scale(1.06)}}
.sustancia-icon .i-waves{transform-origin:0% 50%;animation:siWaves 1.6s ease-out infinite}
@keyframes siWaves{0%{opacity:0;transform:translateX(-2px) scale(.7)}40%{opacity:1}100%{opacity:0;transform:translateX(2px) scale(1.15)}}
.sustancia-icon .i-play{animation:siBlink 1.6s steps(1) infinite}
@keyframes siBlink{50%{opacity:.2}}
/* 03 ideas: bulb glows, rays burst, brain thinks */
.sustancia-card:nth-child(3) .i-rays{animation:siRays 2.4s ease-in-out infinite}
.sustancia-icon .i-bulb{animation:siGlow 2.4s ease-in-out infinite}
@keyframes siGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 3px rgba(198,255,46,.9))}}
.sustancia-icon .i-brain{stroke-dasharray:14;animation:siDraw 2.4s ease-in-out infinite}
@keyframes siDraw{0%{stroke-dashoffset:14}50%,100%{stroke-dashoffset:0}}
/* 04 audiovisual: clapper snaps */
.sustancia-icon .i-arm{transform-origin:0% 100%;animation:siClap 2.2s cubic-bezier(.5,0,.2,1) infinite}
@keyframes siClap{0%,40%{transform:rotate(0)}55%{transform:rotate(-14deg)}68%{transform:rotate(3deg)}74%,100%{transform:rotate(0)}}
.sustancia-icon .i-playc{animation:siPop 2.2s ease-out infinite}
@keyframes siPop{0%,68%,100%{transform:scale(1)}78%{transform:scale(1.25)}}
/* 05 monitoreo: line draws */
.sustancia-icon .i-line{stroke-dasharray:24;animation:siLine 3s ease-in-out infinite}
@keyframes siLine{0%{stroke-dashoffset:24}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-24}}
/* 06 web: brush paints lines */
.sustancia-icon .i-brush{transform-origin:100% 0%;animation:siBrush 3s ease-in-out infinite}
@keyframes siBrush{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-6deg)}50%{transform:translate(-1px,3px) rotate(4deg)}75%{transform:translate(-3px,2px) rotate(-3deg)}}
.sustancia-icon .i-lines path{stroke-dasharray:10;stroke-dashoffset:10;animation:siType 3s ease-in-out infinite}
.sustancia-icon .i-lines .l2{animation-delay:.35s}.sustancia-icon .i-lines .l3{animation-delay:.7s}
@keyframes siType{0%{stroke-dashoffset:10}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:10}}
@media (prefers-reduced-motion:reduce){.sustancia-icon *,.sustancia-icon{animation:none !important}.sustancia-icon .i-lines path{stroke-dashoffset:0}}

/* ===== Imágenes: respetar proporción con width/height ===== */
img{height:auto}
/* ===== Miradas de Héroes: más compacto ===== */
.heroes{padding:48px 24px 52px !important}
.heroes-inner{gap:48px !important}
.heroes-logo{height:150px !important;margin-bottom:16px !important}
.heroes-text{margin-bottom:18px !important}
.heroes-download{align-self:flex-start;margin-top:20px !important}
.heroes-photo{max-height:500px}
.heroes-photo img{height:500px !important;object-fit:cover;object-position:50% 30%}
@media (max-width:860px){
  .heroes-logo{height:120px !important}
  .heroes-photo{max-height:340px}
  .heroes-photo img{height:340px !important}
}

/* ===== Menú inferior tipo gota (solo celular) ===== */
.lp-dock{display:none}
@media (max-width:760px){
  .nav-toggle,.nav-links{display:none !important}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .lp-dock{display:block;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    width:min(94vw,420px);height:92px;z-index:60;-webkit-tap-highlight-color:transparent;touch-action:none}
  .lp-dock-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.55)) drop-shadow(0 0 0.5px rgba(255,255,255,.25))}
  .lp-dock-bg path{fill:rgba(22,20,28,.94);stroke:rgba(255,255,255,.10);stroke-width:1}
  .lp-dock-glow{position:absolute;left:0;top:44px;width:120px;height:60px;margin-left:-60px;border-radius:50%;
    background:radial-gradient(closest-side,var(--dk,#c6ff2e),transparent);opacity:.22;filter:blur(10px);pointer-events:none;transition:background .4s}
  .lp-dock-bead{position:absolute;left:0;top:-1px;width:50px;height:50px;margin-left:-25px;border-radius:50%;
    background:var(--dk,#c6ff2e);box-shadow:0 8px 20px -6px var(--dk,#c6ff2e),inset 0 -4px 8px rgba(0,0,0,.18),inset 0 3px 6px rgba(255,255,255,.45);
    display:flex;align-items:center;justify-content:center;transition:background .4s,box-shadow .4s;cursor:grab;will-change:transform}
  .lp-dock-bead svg{width:22px;height:22px;stroke:#14140f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .lp-dock-bead .ico{display:flex;animation:dkPop .45s cubic-bezier(.34,1.56,.64,1)}
  @keyframes dkPop{from{transform:scale(.4) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
  .lp-dock-tabs{position:absolute;left:18px;right:18px;top:28px;height:64px;display:flex}
  .lp-dock-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#9a97a6;position:relative}
  .lp-dock-tabs a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
  .lp-dock-tabs a span{font-size:10.5px;font-weight:700;letter-spacing:.02em;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;position:absolute;bottom:9px;color:var(--dk)}
  .lp-dock-tabs a.on svg{opacity:0;transform:translateY(-14px) scale(.6)}
  .lp-dock-tabs a.on span{opacity:1;transform:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){ .lp-dock-bead .ico{animation:none} }

/* ===== Tarjetas de gajos enlazadas a sus páginas ===== */
.sustancia-card{position:relative}
.sustancia-more{margin-top:auto;padding-top:6px;color:var(--verde-neon);font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.sustancia-more span{transition:transform .25s ease}
.sustancia-card:hover .sustancia-more span{transform:translateX(4px)}
.sustancia-more::after{content:"";position:absolute;inset:0;border-radius:16px}
.sustancia-more:focus-visible{outline:none}
.sustancia-card:has(.sustancia-more:focus-visible){outline:2px solid var(--verde-neon);outline-offset:3px}

.footer-col-title,.footer-bottom,.footer-bottom a{color:#aeacc2 !important}