  :root{ --bg:#F5F6F7; --surface:#fff; --ink:#141414; --muted:#5C6470; --primary:#FF5230;
         --primary-hover:#D93A1E; --secondary:#233A8F; --border:#E4E6E9; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:'Onest',system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
  h1,h2,.display{ font-family:'Bricolage Grotesque',sans-serif; }

  header{ position:sticky; top:0; background:rgba(245,246,247,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:10; }
  .brand{ display:flex; align-items:center; gap:9px; font-family:'Bricolage Grotesque'; font-weight:700; font-size:18px; letter-spacing:-.2px; white-space:nowrap; }
  .brand img{ height:30px; }
  .links{ display:flex; gap:26px; }
  .links a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; transition:color .2s; }
  .links a:hover{ color:var(--ink); }
  .cta{ display:flex; gap:12px; align-items:center; }
  .btn{ font-family:'Onest'; font-weight:600; font-size:14px; border-radius:10px; padding:11px 20px; border:0; cursor:pointer;
        text-decoration:none; display:inline-block; transition:transform .15s cubic-bezier(.16,1,.3,1), background .2s, box-shadow .2s; white-space:nowrap; }
  .btn:active{ transform:translateY(1px) scale(.99); }
  .btn.p{ background:var(--primary); color:#141414; }
  .btn.p:hover{ background:#FF6A4A; box-shadow:0 6px 18px rgba(217,58,30,.22); }
  .btn.s{ background:transparent; color:var(--ink); border:1px solid var(--border); }
  .btn.s:hover{ border-color:var(--ink); }
  .burger{ display:none; width:42px; height:40px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:16px; cursor:pointer; }

  .hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:64px 24px 72px; }
  .hero h1{ font-size:56px; line-height:1.03; letter-spacing:-1.5px; font-weight:800; }
  .hero h1 em{ font-style:normal; color:#C4361B; }
  .hero p{ font-size:18px; line-height:1.55; color:var(--muted); max-width:480px; margin-top:18px; }
  .hero .ctas{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
  .btn.lg{ padding:15px 28px; font-size:15px; }
  .trust{ margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; }
  .trust span{ font-size:13px; color:var(--muted); background:#fff; border:1px solid var(--border);
               padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; }
  .trust .dot{ width:6px; height:6px; border-radius:50%; background:var(--primary); }

  /* Hero preview — pack de assets (uniforme) */
  .shot{ border-radius:22px; background:linear-gradient(150deg,#ffffff,#EDF0F2);
         box-shadow:0 40px 80px -30px rgba(20,20,20,.28); padding:16px; position:relative; overflow:hidden; }
  .shot::before{ content:""; position:absolute; inset:0; background:radial-gradient(420px 220px at 85% 0%, rgba(255,82,48,.12), transparent 70%); }
  .pack{ position:relative; background:#fff; border-radius:16px; padding:16px; }
  .pack-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .pack-k{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:15px; }
  .pack-sub{ color:var(--muted); font-size:12px; margin-top:2px; }
  .pill{ background:#FFECE7; color:#C4361B; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; }
  .icons{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .icons img{ width:100%; aspect-ratio:1; object-fit:contain; background:#F7F8F9; border-radius:12px; padding:10px; }

  @media (prefers-reduced-motion: no-preference){
    .anim{ animation:up .7s cubic-bezier(.16,1,.3,1) both; }
    .anim.d1{ animation-delay:.08s; } .anim.d2{ animation-delay:.16s; } .anim.d3{ animation-delay:.26s; }
    @keyframes up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  }
  @media (max-width:900px){
    .hero{ grid-template-columns:1fr; gap:30px; padding:44px 0 56px; }
    .hero h1{ font-size:42px; letter-spacing:-1px; }
  }
  @media (max-width:600px){
    .links, .cta{ display:none; }
    .burger{ display:block; }
    .wrap{ padding:0 24px; }
    .hero{ padding:30px 24px 44px; gap:26px; }
    .hero h1{ font-size:28px; letter-spacing:-.3px; line-height:1.12; }
    .hero p{ font-size:15.5px; margin-top:12px; }
    .hero .ctas{ margin-top:20px; gap:10px; }
    .btn.lg{ flex:1; font-size:13px; padding:14px 6px; }
    .trust{ margin-top:16px; gap:7px; }
    .trust span{ font-size:12px; padding:5px 10px; }
    .shot{ padding:12px; }
    .pack{ padding:14px; }
    .icons{ gap:10px; }
  }

html{scroll-behavior:smooth;scroll-padding-top:70px;}

    .hd{
      position:sticky; top:0; z-index:900;
      background:rgba(245,246,247,.85);
      -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
      box-shadow:inset 0 -1px 0 var(--border, #E4E6E9);
    }
    .hd-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
    .hd-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; }

    /* marca */
    .hd-brand{
      display:flex; align-items:center; gap:9px; text-decoration:none;
      font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:18px;
      letter-spacing:-.2px; color:var(--ink, #141414); white-space:nowrap;
    }
    .hd-brand img{ height:30px; width:auto; display:block; }

    /* links desktop */
    .hd-links{ display:flex; gap:26px; }
    .hd-links a{
      color:var(--muted, #5C6470); text-decoration:none; font-size:15px; font-weight:500;
      transition:color .2s ease;
    }
    .hd-links a:hover{ color:var(--ink, #141414); }

    /* CTA único */
    .hd-cta{ display:flex; align-items:center; }
    .hd-btn{
      font-family:'Onest', system-ui, sans-serif; font-weight:600; font-size:14px;
      border-radius:10px; padding:11px 20px; border:0; cursor:pointer; text-decoration:none;
      display:inline-block; white-space:nowrap;
      transition:transform .15s cubic-bezier(.16,1,.3,1), background .2s, box-shadow .2s;
    }
    .hd-btn:active{ transform:translateY(1px) scale(.99); }
    .hd-btn--primary{ background:var(--primary, #FF5230); color:#141414; }
    .hd-btn--primary:hover{ background:var(--primary-hover, #FF6A4A); box-shadow:0 6px 18px rgba(217,58,30,.22); }

    a:focus-visible, button:focus-visible{
      outline:2px solid var(--secondary, #233A8F); outline-offset:2px; border-radius:8px;
    }

    /* hamburguesa (izquierda, con fondo) */
    .hd-left{ display:flex; align-items:center; gap:12px; }
    .hd-burger{
      display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
      width:44px; height:42px; padding:0; border:1px solid var(--border, #E4E6E9);
      border-radius:12px; background:var(--bg, #F5F6F7); cursor:pointer;
    }
    .hd-burger:hover{ background:#ECEEF0; }
    .hd-burger span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink, #141414); }

    /* DRAWER móvil (izq, desliza, color de marca) */
    .hd-scrim{ position:fixed; inset:0; background:rgba(20,20,20,.45); opacity:0; visibility:hidden;
      transition:opacity .25s ease; z-index:99990; }
    .hd-scrim.is-open{ opacity:1; visibility:visible; }
    .hd-menu{
      position:fixed; top:0; left:0; bottom:0; width:300px; max-width:86vw;
      background:linear-gradient(165deg, #FF7A5C 0%, #E24A2E 100%);
      color:#fff; z-index:99999; transform:translateX(-106%);
      transition:transform .3s cubic-bezier(.16,1,.3,1);
      overflow-y:auto; padding:18px 16px 26px; display:flex; flex-direction:column; gap:2px;
    }
    .hd-menu.is-open{ transform:none; }
    .hd-menu-head{ display:flex; align-items:center; gap:12px; padding:2px 4px 14px; }
    .hd-logo{ width:46px; height:46px; border-radius:14px; background:#fff; display:flex;
      align-items:center; justify-content:center; flex-shrink:0; }
    .hd-logo img{ width:30px; height:30px; display:block; }
    .hd-tit{ font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:17px; line-height:1.1; }
    .hd-sub{ font-size:12px; opacity:.85; margin-top:1px; }
    .hd-menu-close{ margin-left:auto; width:38px; height:38px; border-radius:50%;
      border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;
      font-size:15px; cursor:pointer; flex-shrink:0; }
    .hd-menu-close:hover{ background:rgba(255,255,255,.24); }
    .hd-promo{ background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
      border-radius:14px; padding:12px 14px; margin:4px 0 6px; }
    .hd-promo b{ font-family:'Bricolage Grotesque', sans-serif; font-size:15px; }
    .hd-promo span{ display:block; font-size:12px; opacity:.9; margin-top:3px; line-height:1.35; }
    .hd-group{ font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
      opacity:.75; margin:16px 10px 6px; }
    .hd-menu .hd-item{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:12px;
      color:#fff; text-decoration:none; font-size:15.5px; font-weight:500; transition:background .16s; }
    .hd-menu .hd-item i{ width:22px; text-align:center; font-size:16px; opacity:.95; }
    .hd-menu .hd-item:hover{ background:rgba(255,255,255,.16); }
    .hd-menu .hd-mcta{ margin-top:16px; background:#fff; color:#E24A2E; text-align:center;
      padding:14px; border-radius:12px; font-weight:700; text-decoration:none; font-size:15px; }

    @media (prefers-reduced-motion: no-preference){
      .hd-burger span{ transition:transform .22s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
      .hd.is-open .hd-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
      .hd.is-open .hd-burger span:nth-child(2){ opacity:0; }
      .hd.is-open .hd-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
    }

    @media (max-width:600px){
      .hd-nav{ height:60px; }
      .hd-links, .hd-cta{ display:none; }
      .hd-burger{ display:flex; }
    }
  

    .hero-dds{
      --dds-bg:#F5F6F7; --dds-surface:#fff; --dds-ink:#141414; --dds-muted:#5C6470;
      --dds-primary:#FF5230; --dds-primary-hover:#FF6A4A; --dds-secondary:#233A8F;
      --dds-border:#E4E6E9;
      --dds-shadow:0 30px 60px -30px rgba(20,20,20,.25);
      background:var(--dds-bg);
      color:var(--dds-ink);
      font-family:'Onest',system-ui,sans-serif;
      -webkit-font-smoothing:antialiased;
      padding-block:clamp(40px,7vw,76px) clamp(48px,8vw,84px);
    }
    .hero-dds *{ box-sizing:border-box; }
    .hero-dds__inner{
      max-width:1120px;
      margin-inline:auto;
      padding-inline:24px; /* margen lateral intacto: nunca se anula */
    }
    .hero-dds__grid{
      display:grid;
      grid-template-columns:1fr;
      gap:clamp(30px,6vw,40px);
      align-items:center;
    }
    @media (min-width:901px){
      .hero-dds__grid{ grid-template-columns:1.02fr .98fr; gap:56px; }
    }

    /* --- Columna de texto --- */
    .hero-dds__title{
      font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:800;
      font-size:clamp(30px,7.6vw,58px);
      line-height:1.04;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .hero-dds__title em{ font-style:normal; color:#C4361B; }
    .hero-dds__lead{
      margin-top:clamp(12px,2.4vw,18px);
      font-size:clamp(15.5px,1.35vw,18px);
      line-height:1.55;
      color:var(--dds-muted);
      max-width:44ch;
      text-wrap:pretty;
    }
    .hero-dds__ctas{
      display:flex;
      flex-wrap:nowrap;
      gap:10px;
      margin-top:clamp(20px,3.2vw,28px);
    }
    .hero-dds__btn{
      font-family:'Onest',system-ui,sans-serif;
      font-weight:600;
      font-size:clamp(13.5px,1.1vw,15px);
      line-height:1;
      border-radius:12px;
      padding:15px 24px;
      border:1px solid transparent;
      cursor:pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:1 1 0;
      min-width:0;
      white-space:nowrap;
      transition:transform .15s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s, box-shadow .2s;
    }
    .hero-dds__btn:active{ transform:translateY(1px) scale(.99); }
    .hero-dds__btn--primary{ background:var(--dds-primary); color:#141414; }
    .hero-dds__btn--primary:hover{
      background:var(--dds-primary-hover);
      box-shadow:0 8px 20px -6px rgba(217,58,30,.45);
    }
    .hero-dds__btn--ghost{ background:var(--dds-surface); color:var(--dds-ink); border-color:var(--dds-border); }
    .hero-dds__btn--ghost:hover{ border-color:var(--dds-ink); }

    .hero-dds__trust{
      list-style:none;
      margin:clamp(18px,2.8vw,24px) 0 0;
      padding:0;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .hero-dds__trust li{
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-size:13px;
      font-weight:500;
      color:var(--dds-muted);
      background:var(--dds-surface);
      border:1px solid var(--dds-border);
      border-radius:999px;
      padding:6px 12px;
    }
    .hero-dds__trust li::before{
      content:"";
      width:6px; height:6px;
      border-radius:50%;
      background:var(--dds-primary);
      flex:0 0 auto;
    }

    /* --- Columna del preview --- */
    .hero-dds__shot{
      position:relative;
      background:linear-gradient(155deg,#ffffff,#EDF0F2);
      border:1px solid var(--dds-border);
      border-radius:22px;
      padding:clamp(10px,1.4vw,14px);
      box-shadow:var(--dds-shadow);
      max-width:452px;
      margin-inline:auto;
    }
    .hero-dds__pack{
      background:var(--dds-surface);
      border-radius:16px;
      padding:clamp(12px,1.5vw,16px);
    }
    .hero-dds__pack-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:clamp(10px,1.4vw,14px);
    }
    .hero-dds__pack-k{
      font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:700;
      font-size:15px;
      letter-spacing:-.01em;
    }
    .hero-dds__pack-sub{ color:var(--dds-muted); font-size:12px; margin-top:2px; }
    .hero-dds__pill{
      flex:0 0 auto;
      background:#FFECE7;
      color:#C4361B;
      font-size:11px;
      font-weight:700;
      padding:5px 10px;
      border-radius:999px;
      white-space:nowrap;
    }
    .hero-dds__icons{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(8px,1.1vw,12px);
      max-width:clamp(240px,34vw,336px); /* limita alto: mantiene 2 filas y balancea con el texto */
      margin-inline:auto;
    }
    .hero-dds__icons img{
      width:100%;
      height:auto;
      aspect-ratio:1;
      object-fit:contain;
      background:#F7F8F9;
      border-radius:12px;
      padding:clamp(8px,1vw,10px);
      display:block;
    }
    .hero-dds__video{
      display:block;
      width:100%;
      height:auto;
      aspect-ratio:16/9;
      object-fit:cover;
      border-radius:16px;
      background:#EDF0F2;
    }
    .hero-dds__sound{
      position:absolute;
      right:clamp(16px,2vw,22px);
      bottom:clamp(16px,2vw,22px);
      width:38px; height:38px;
      display:inline-flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,.55);
      background:rgba(20,20,20,.55);
      color:#fff;
      font-size:15px;
      border-radius:999px;
      cursor:pointer;
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
      z-index:2;
    }
    .hero-dds__sound:hover{ background:rgba(20,20,20,.78); }
    .hero-dds__sound:active{ transform:scale(.94); }
    .hero-dds__sound:focus-visible{ outline:3px solid var(--dds-primary); outline-offset:3px; }
    .hero-dds__sound.is-on{ background:var(--dds-primary); border-color:transparent; }

    @media (prefers-reduced-motion: no-preference){
      .hero-dds__reveal{ animation:hero-dds-rise .7s cubic-bezier(.16,1,.3,1) both; }
      .hero-dds__reveal--2{ animation-delay:.08s; }
      .hero-dds__reveal--3{ animation-delay:.16s; }
      .hero-dds__reveal--4{ animation-delay:.24s; }
      @keyframes hero-dds-rise{
        from{ opacity:0; transform:translateY(22px); }
        to{ opacity:1; transform:none; }
      }
    }
  

    .mc{ background:var(--bg); padding:60px 0; }
    .mc-inner{ max-width:1120px; margin:0 auto; padding:0 24px; }
    .mc h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.6px;
            font-size:clamp(26px,4vw,38px); text-align:center; }
    .mc .mc-sub{ text-align:center; color:var(--muted); margin:8px 0 26px; font-size:16px; }
    .mc-swiper{ border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(20,20,20,.28); }
    .mc-swiper .swiper-slide{ position:relative; }
    .mc-swiper .swiper-slide img{ width:100%; display:block; }
    .mc-swiper .swiper-slide .cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
            background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff; font-family:'Bricolage Grotesque';
            font-weight:700; font-size:20px; }
    .mc .swiper-button-prev,.mc .swiper-button-next{ width:44px; height:44px; border-radius:50%;
            background:rgba(255,255,255,.9); color:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.18); }
    .mc .swiper-button-prev::after,.mc .swiper-button-next::after{ font-size:17px; font-weight:800; }
    .mc .swiper-pagination-bullet-active{ background:var(--primary); }
    @media (max-width:600px){
      .mc{ padding:40px 0; }
      .mc h2{ font-size:24px; }
      .mc-swiper .swiper-slide .cap{ font-size:16px; padding:16px 18px; }
    }
  

    .s3{
      --bg:#F5F6F7; --surface:#fff; --ink:#141414; --muted:#5C6470;
      --primary:#FF5230; --primary-hover:#FF6A4A; --secondary:#233A8F; --border:#E4E6E9;
      font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
      color:var(--ink); background:var(--bg);
      padding-block:72px;
    }
    .s3 *,.s3 *::before,.s3 *::after{ box-sizing:border-box; }
    .s3-wrap{ max-width:1120px; margin:0 auto; padding-inline:24px; }
    .s3-head{ max-width:620px; margin:0 0 36px; }
    .s3-eyebrow{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.14em;
      text-transform:uppercase; color:var(--primary); }
    .s3-title{ margin:0; font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:800; font-size:40px; line-height:1.06; letter-spacing:-1px; }
    .s3-sub{ margin:12px 0 0; font-size:17px; line-height:1.55; color:var(--muted); }
    .s3-grid{ list-style:none; margin:0; padding:0; display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
    .s3-card{ min-width:0; display:flex; flex-direction:column; gap:12px;
      background:var(--surface); border:1px solid var(--border); border-radius:16px;
      padding:16px; overflow-wrap:break-word;
      transition:transform .28s cubic-bezier(.16,1,.3,1), border-color .28s, box-shadow .28s; }
    .s3-card:hover{ transform:translateY(-4px); border-color:#D6D9DE;
      box-shadow:0 24px 46px -28px rgba(20,20,20,.38); }
    .s3-media{ aspect-ratio:1/1; border-radius:12px; background:#F7F8F9;
      display:grid; place-items:center; overflow:hidden; }
    .s3-media img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
    .s3-media.cover img{ width:100%; height:100%; object-fit:cover; }
    .s3-media svg{ width:82%; height:82%; display:block; }
    .s3-t{ margin:0; font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:700; font-size:16px; line-height:1.2; letter-spacing:-.2px; }
    .s3-d{ margin:0; font-size:13px; line-height:1.45; color:var(--muted); }

    @media (prefers-reduced-motion: no-preference){
      .s3 .rv{ animation:s3up .6s cubic-bezier(.16,1,.3,1) both;
        animation-delay:calc(var(--i,0) * 70ms); }
      @keyframes s3up{ from{ opacity:0; transform:translateY(16px); }
        to{ opacity:1; transform:none; } }
    }
    @media (max-width:900px){
      .s3{ padding-block:56px; }
      .s3-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
      .s3-title{ font-size:32px; letter-spacing:-.6px; }
    }
    @media (max-width:600px){
      .s3{ padding-block:44px; }
      .s3-head{ margin-bottom:24px; }
      .s3-title{ font-size:26px; letter-spacing:-.4px; }
      .s3-sub{ margin-top:8px; font-size:15px; }
      .s3-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
      .s3-card{ padding:10px; gap:7px; border-radius:14px; }
      .s3-media{ border-radius:11px; }
      .s3-t{ font-size:12.5px; letter-spacing:-.2px; }
      .s3-d{ font-size:10.5px; line-height:1.28; }
    }
  

  .s4-band{
    background:var(--surface);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    overflow-x:clip;
  }
  .s4-wrap{
    max-width:1120px;
    margin:0 auto;
    padding:72px 24px;
  }

  .s4-head{ max-width:620px; }
  .s4-eyebrow{
    font-family:'Onest',system-ui,sans-serif;
    font-size:13px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--primary);
  }
  .s4-head h2{
    font-family:'Bricolage Grotesque',system-ui,sans-serif;
    font-weight:800; font-size:46px; line-height:1.02;
    letter-spacing:-1.2px; color:var(--ink); margin-top:12px;
  }
  .s4-lead{
    font-family:'Onest',system-ui,sans-serif;
    color:var(--muted); font-size:17px; line-height:1.55; margin-top:14px;
  }

  /* ---- Controles ---- */
  .s4-controls{
    display:flex; flex-wrap:wrap; gap:16px;
    margin:28px 0 22px;
  }
  .s4-field{
    display:flex; flex-direction:column; gap:8px;
    flex:1 1 240px; min-width:0; max-width:280px;
  }
  .s4-label{
    font-family:'Onest',system-ui,sans-serif;
    font-size:13px; font-weight:600; color:var(--muted);
  }
  .s4-selectwrap{ position:relative; display:block; }
  .s4-select{
    -webkit-appearance:none; appearance:none;
    width:100%; font-family:'Onest',system-ui,sans-serif;
    font-size:15px; font-weight:600; color:var(--ink);
    background:var(--bg); border:1px solid var(--border); border-radius:12px;
    padding:13px 44px 13px 14px; cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .s4-select:hover{ border-color:#cdd2d8; }
  .s4-select:focus-visible{
    outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(255,82,48,.18);
  }
  .s4-chev{
    position:absolute; right:14px; top:50%; width:14px; height:14px;
    transform:translateY(-50%); pointer-events:none; color:var(--muted);
  }

  /* ---- Stage / carrusel ---- */
  .s4-stage{ position:relative; }
  .s4-swiper{
    width:100%; height:clamp(240px, 40vw, 400px);
    overflow:hidden; border-radius:18px;
  }
  .s4-slide{
    height:100%;
    width:clamp(210px, 60vw, 310px);
  }
  .s4-stage[data-tipo="coverflow"] .s4-slide,
  .s4-stage[data-tipo="circular"] .s4-slide{
    width:clamp(190px, 54vw, 290px);
  }
  .s4-card{
    position:relative; width:100%; height:100%; margin:0;
    border-radius:16px; overflow:hidden; background:var(--bg);
    border:1px solid var(--border);
    box-shadow:0 24px 50px -32px rgba(20,20,20,.38);
  }
  .s4-card img{
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .s4-tag{
    position:absolute; left:12px; bottom:12px;
    font-family:'Onest',system-ui,sans-serif;
    font-size:12px; font-weight:600; color:#fff;
    background:rgba(20,20,20,.6); padding:6px 11px; border-radius:999px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }

  /* ---- Navegación ---- */
  .s4-nav{
    display:flex; align-items:center; justify-content:center;
    gap:18px; margin-top:22px;
  }
  .s4-arrow{
    display:none; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    font-size:20px; line-height:1; cursor:pointer;
    transition:transform .15s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease;
  }
  .s4-arrow:hover{ border-color:var(--ink); }
  .s4-arrow:active{ transform:translateY(1px) scale(.97); }
  .s4-arrow:disabled{ opacity:.35; cursor:default; }
  .s4-stage[data-tipo="slider"] .s4-arrow{ display:inline-flex; }

  .s4-nav .s4-pagination{
    position:static; width:auto; display:flex; align-items:center; gap:6px;
  }
  .s4-nav .swiper-pagination-bullet{
    width:8px; height:8px; margin:0 !important;
    background:var(--muted); opacity:.3;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
  }
  .s4-nav .swiper-pagination-bullet-active{
    background:var(--primary); opacity:1; transform:scale(1.15);
  }

  /* ---- Fallback sin CDN ---- */
  .s4-fallback .s4-wrapper{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
  .s4-fallback .s4-slide{ height:auto; }
  .s4-fallback .s4-card{ height:clamp(240px, 40vw, 400px); }

  /* ---- Motion ---- */
  @media (prefers-reduced-motion: no-preference){
    .s4-fade{ animation:s4-up .7s cubic-bezier(.16,1,.3,1) both; }
    .s4-fade.d1{ animation-delay:.05s; }
    .s4-fade.d2{ animation-delay:.13s; }
    .s4-fade.d3{ animation-delay:.22s; }
    @keyframes s4-up{
      from{ opacity:0; transform:translateY(20px); }
      to{ opacity:1; transform:none; }
    }
  }

  @media (max-width:900px){
    .s4-wrap{ padding:56px 24px; }
    .s4-head h2{ font-size:36px; letter-spacing:-.9px; }
    .s4-swiper{ height:clamp(230px, 46vw, 340px); }
  }

  @media (max-width:600px){
    .s4-wrap{ padding:44px 24px; }
    .s4-head h2{ font-size:29px; letter-spacing:-.5px; }
    .s4-lead{ font-size:15.5px; }
    .s4-controls{ gap:12px; margin:22px 0 18px; }
    .s4-field{ flex:1 1 100%; max-width:none; }
    .s4-swiper{ height:250px; }
    .s4-slide{ width:min(78%, 250px); }
    .s4-stage[data-tipo="coverflow"] .s4-slide,
    .s4-stage[data-tipo="circular"] .s4-slide{ width:min(70%, 230px); }
    .s4-nav{ margin-top:18px; gap:14px; }
    .s4-arrow{ width:42px; height:42px; }
  }


    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Onest:wght@400;500;600;700&display=swap');

    .s5{
      --bg:#F5F6F7; --surface:#fff; --ink:#141414; --muted:#5C6470;
      --primary:#FF5230; --primary-hover:#FF6A4A; --secondary:#233A8F; --border:#E4E6E9;
      background:var(--bg); color:var(--ink);
      padding:72px 0;
    }
    .s5 *, .s5 *::before, .s5 *::after{ box-sizing:border-box; }
    .s5-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

    .s5-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
    .s5-kicker{
      display:inline-block; font-family:'Onest',sans-serif; font-weight:700; font-size:12.5px;
      letter-spacing:.09em; text-transform:uppercase; color:var(--primary);
    }
    .s5-title{
      font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
      font-size:36px; line-height:1.06; letter-spacing:-1px; margin-top:10px;
    }
    .s5-sub{ font-family:'Onest',sans-serif; font-size:16px; line-height:1.55; color:var(--muted); margin-top:12px; }

    .s5-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }

    .s5-card{
      position:relative; min-width:0;
      background:var(--surface); border:1px solid var(--border); border-radius:22px;
      padding:30px 26px 26px;
      display:flex; flex-direction:column;
      box-shadow:0 18px 40px -30px rgba(20,20,20,.28);
    }
    .s5-card.feat{
      border:2px solid var(--primary);
      box-shadow:0 30px 60px -30px rgba(20,20,20,.30);
    }

    .s5-badge{
      position:absolute; top:-13px; left:50%; transform:translateX(-50%);
      background:var(--primary); color:var(--ink);
      font-family:'Onest',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.02em;
      padding:6px 14px; border-radius:999px; white-space:nowrap;
    }

    .s5-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.3px; }
    .s5-desc{ font-family:'Onest',sans-serif; font-size:14px; line-height:1.5; color:var(--muted); margin-top:6px; min-height:42px; }

    .s5-price{ display:flex; align-items:flex-end; gap:4px; margin:20px 0 4px; }
    .s5-cur{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:24px; line-height:1.4; padding-bottom:6px; }
    .s5-num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:56px; line-height:1; letter-spacing:-2px; }
    .s5-per{ font-family:'Onest',sans-serif; font-weight:500; font-size:14px; color:var(--muted); padding-bottom:9px; }
    .s5-note{ font-family:'Onest',sans-serif; font-size:13px; color:var(--muted); }

    .s5-line{ height:1px; background:var(--border); margin:22px 0; border:0; }

    .s5-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
    .s5-feats li{ display:flex; align-items:flex-start; gap:10px; font-family:'Onest',sans-serif; font-size:14.5px; line-height:1.4; color:var(--ink); }
    .s5-check{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--primary); }
    .s5-card.feat .s5-check{ color:var(--secondary); }

    .s5-btn{
      margin-top:auto; width:100%; text-align:center; text-decoration:none; cursor:pointer;
      font-family:'Onest',sans-serif; font-weight:600; font-size:15px;
      padding:14px 20px; border-radius:12px; border:1px solid var(--border);
      background:transparent; color:var(--ink);
      transition:background .2s, border-color .2s, transform .15s cubic-bezier(.16,1,.3,1);
    }
    .s5-btn.p{ background:var(--primary); border-color:var(--primary); color:var(--ink); }
    .s5-btn.s{ border-color:var(--border); }
    .s5-btn:hover{ border-color:var(--ink); }
    .s5-btn.p:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
    .s5-btn:active{ transform:translateY(1px) scale(.99); }
    .s5-spacer{ height:24px; }

    @media (prefers-reduced-motion: no-preference){
      .s5-anim{ animation:s5up .7s cubic-bezier(.16,1,.3,1) both; }
      .s5-anim.d1{ animation-delay:.06s; } .s5-anim.d2{ animation-delay:.14s; } .s5-anim.d3{ animation-delay:.22s; }
      @keyframes s5up{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
    }

    @media (max-width:900px){
      .s5{ padding:56px 0; }
      .s5-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; gap:18px; }
      .s5-head{ margin-bottom:34px; }
      .s5-title{ font-size:30px; letter-spacing:-.6px; }
      .s5-card{ padding:28px 22px 24px; }
      .s5-card.feat{ order:-1; }
    }

    @media (max-width:600px){
      .s5{ padding:44px 0; }
      .s5-wrap{ padding:0 18px; }
      .s5-title{ font-size:26px; }
      .s5-sub{ font-size:15px; }
      .s5-num{ font-size:48px; }
      .s5-desc{ min-height:0; }
      .s5-line{ margin:18px 0; }
    }
  

    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Onest:wght@400;500;600;700&display=swap');

    .s6{
      --bg:#F5F6F7; --surface:#fff; --ink:#141414; --muted:#5C6470;
      --primary:#FF5230; --primary-hover:#FF6A4A; --secondary:#233A8F; --border:#E4E6E9;
      --s6-text-soft:#AEB6C0; --s6-text-dim:#98A0AB; --s6-hair:rgba(255,255,255,.12);
      font-family:'Onest',system-ui,-apple-system,sans-serif;
      color:var(--ink);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
    }
    .s6 *, .s6 *::before, .s6 *::after{ box-sizing:border-box; }
    .s6 :where(h2, h3, p, ul, li, a, img){ margin:0; padding:0; }
    .s6 ul{ list-style:none; }

    .s6-wrap{
      width:100%;
      max-width:1120px;
      margin-left:auto;
      margin-right:auto;
      padding-left:24px;
      padding-right:24px;
    }

    /* ---------- CTA ---------- */
    .s6-cta{ padding-top:72px; padding-bottom:8px; }
    .s6-panel{
      position:relative;
      background:var(--ink);
      color:#fff;
      border-radius:22px;
      padding:44px 24px;
      text-align:center;
      overflow:hidden;
      box-shadow:0 30px 60px -30px rgba(20,20,20,.25);
    }
    .s6-panel::after{
      content:"";
      position:absolute;
      left:0; right:0; top:0;
      height:4px;
      background:var(--primary);
    }
    .s6-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--s6-text-soft);
      border:1px solid var(--s6-hair);
      border-radius:999px;
      padding:7px 14px;
      margin-bottom:22px;
    }
    .s6-eyebrow .s6-dot{
      width:7px; height:7px; border-radius:50%;
      background:var(--primary);
      flex:0 0 auto;
    }
    .s6-title{
      font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:800;
      font-size:clamp(30px,8vw,54px);
      line-height:1.06;
      letter-spacing:-.02em;
      max-width:760px;
      margin-left:auto;
      margin-right:auto;
      overflow-wrap:break-word;
    }
    .s6-title em{ font-style:normal; color:var(--primary); }
    .s6-sub{
      color:rgba(255,255,255,.76);
      font-size:16px;
      line-height:1.55;
      max-width:560px;
      margin-top:18px;
      margin-left:auto;
      margin-right:auto;
    }
    .s6-actions{ margin-top:30px; }

    .s6-btn{
      font-family:'Onest',system-ui,sans-serif;
      font-weight:600;
      font-size:16px;
      line-height:1;
      color:var(--ink);
      background:var(--primary);
      border:0;
      border-radius:12px;
      padding:16px 32px;
      cursor:pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      white-space:nowrap;
      transition:background .2s ease, box-shadow .2s ease, transform .15s cubic-bezier(.16,1,.3,1);
    }
    .s6-btn:hover{ background:var(--primary-hover); box-shadow:0 10px 26px -10px rgba(255,82,48,.55); }
    .s6-btn:active{ transform:translateY(1px) scale(.99); }
    .s6-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
    .s6-note{
      margin-top:18px;
      color:var(--s6-text-dim);
      font-size:13.5px;
    }

    /* ---------- Footer ---------- */
    .s6-footer{ background:var(--ink); color:#fff; margin-top:64px; }
    .s6-footer-inner{ padding-top:56px; padding-bottom:26px; }
    .s6-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:34px 24px;
    }
    .s6-brandcol{ grid-column:1 / -1; min-width:0; }
    .s6-brandrow{ display:flex; align-items:center; gap:12px; }
    .s6-logo{
      width:46px; height:46px;
      flex:0 0 auto;
      border-radius:12px;
      background:#fff;
      padding:7px;
      object-fit:contain;
      display:block;
    }
    .s6-brandname{
      font-family:'Bricolage Grotesque',system-ui,sans-serif;
      font-weight:700;
      font-size:19px;
      letter-spacing:-.01em;
      line-height:1.15;
      color:#fff;
    }
    .s6-tagline{
      color:var(--s6-text-soft);
      font-size:15px;
      line-height:1.55;
      margin-top:16px;
      max-width:300px;
    }
    .s6-col{ min-width:0; }
    .s6-coltitle{
      font-size:12.5px;
      font-weight:700;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:#fff;
      margin-bottom:16px;
    }
    .s6-list{ display:flex; flex-direction:column; gap:12px; }
    .s6-list a{
      color:var(--s6-text-soft);
      text-decoration:none;
      font-size:15px;
      line-height:1.35;
      transition:color .18s ease;
    }
    .s6-list a:hover{ color:#fff; }
    .s6-list a:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }

    .s6-bottom{
      margin-top:44px;
      padding-top:20px;
      border-top:1px solid var(--s6-hair);
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:10px 18px;
    }
    .s6-copy{ color:var(--s6-text-dim); font-size:14px; }
    .s6-madewith{ color:var(--s6-text-dim); font-size:14px; }
    .s6-madewith b{ color:var(--s6-text-soft); font-weight:600; }

    /* ---------- Motion ---------- */
    @media (prefers-reduced-motion: no-preference){
      .s6-rise{ animation:s6-rise .7s cubic-bezier(.16,1,.3,1) both; }
      .s6-rise.d1{ animation-delay:.08s; }
      .s6-rise.d2{ animation-delay:.16s; }
      @keyframes s6-rise{
        from{ opacity:0; transform:translateY(20px); }
        to{ opacity:1; transform:none; }
      }
    }

    /* ---------- Tablet + ---------- */
    @media (min-width:601px){
      .s6-cta{ padding-top:96px; }
      .s6-panel{ padding:64px 48px; }
      .s6-grid{ gap:40px 32px; }
      .s6-footer{ margin-top:80px; }
    }

    /* ---------- Desktop ---------- */
    @media (min-width:901px){
      .s6-cta{ padding-top:112px; }
      .s6-panel{ padding:76px 64px; }
      .s6-sub{ font-size:18px; margin-top:20px; }
      .s6-actions{ margin-top:34px; }
      .s6-grid{ grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px 40px; }
      .s6-brandcol{ grid-column:auto; }
      .s6-tagline{ margin-top:18px; }
      .s6-footer-inner{ padding-top:68px; padding-bottom:30px; }
    }

.s6-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.s6-btn.ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.s6-btn.ghost:hover{ background:rgba(255,255,255,.10); box-shadow:none; }
.s6-contact{ margin-top:16px; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.s6-contact a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; opacity:.85; transition:opacity .2s ease; }
.s6-contact a:hover{ opacity:1; }
.s6-contact i{ color:var(--primary); }
  