/**
 * ============================================================================
 *  Autorys Platform · partners/assets/css/partners-home.css
 * ----------------------------------------------------------------------------
 *  Estilos de la portada pública de partners.autorys.com.
 *  Diseño: "Rediseño Partners Autorys" aprobado por Richard (29-sep-2026).
 *  Secciones: 1 colores · 2 base · 3 menú + idioma · 4 hero · 5 franja ·
 *  6 pasos · 7 comisiones · 8 soluciones · 9 preguntas · 10 cierre y pie ·
 *  11 tableta · 12 celular · 13 movimiento reducido
 *
 *  Desarrollado por Autorys · https://autorys.com
 *  (c) Autorys. Todos los derechos reservados.
 * ============================================================================
 */

/* ---------- 1. Colores (claro y oscuro) ---------- */
:root{
  color-scheme:light dark;
  --ink:#071622; --muted:#4b5d69; --paper:#f6f8f9; --surface:#ffffff;
  --line:#d8e1e6; --brand:#009bc7; --brand-deep:#006f91; --night:#071622;
  --night-2:#0d2433; --lime:#c9f54a; --soft:#e9f7fb; --warn:#f2efe0;
  --shadow:0 18px 50px rgba(7,22,34,.10);
  --radius:18px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#ecf6f8; --muted:#aec0c9; --paper:#07131c; --surface:#0d202c;
    --line:#28404d; --brand:#36c4e9; --brand-deep:#7edbf0; --night:#031019;
    --night-2:#0b2635; --lime:#c9f54a; --soft:#102c38; --warn:#2e2d22;
    --shadow:0 18px 50px rgba(0,0,0,.26);
  }
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",sans-serif;line-height:1.55}
a{color:inherit}
button,input{font:inherit}
img{max-width:100%}
.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--lime);color:#142000;padding:8px 12px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
.cta:focus-visible,.lang-btn:focus-visible,.nav a:focus-visible,summary:focus-visible,.sell-card a:focus-visible{outline:3px solid #8edff2;outline-offset:2px}

/* ---------- 3. Menú superior + selector de idioma (mismo de autorys.com) ---------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.nav-links a{text-decoration:none}.nav-links a:hover{color:var(--brand-deep)}
.nav-mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--muted);text-decoration:none;text-transform:uppercase;white-space:nowrap}
.nav-mark::before{content:"";width:22px;height:3px;background:var(--brand);flex:none}
.nav-login{color:var(--muted)}
.lang{position:relative}
.lang-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;cursor:pointer}
.lang-menu{display:none;position:absolute;right:0;top:44px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:6px;border-radius:12px;width:150px;z-index:30}
.lang.open .lang-menu{display:block}
.lang-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.lang-menu a:hover{background:var(--soft)}
.lang-menu a.active{font-weight:700;color:var(--brand-deep)}

/* ---------- Botones ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border-radius:10px;background:var(--lime);color:#142000;text-decoration:none;font-weight:700;border:1px solid color-mix(in srgb,#000 12%,transparent);box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .18s,box-shadow .18s;white-space:nowrap}
.cta:hover{transform:translateY(-1px);box-shadow:0 5px 0 rgba(0,0,0,.18)}
.cta.dark{background:var(--night);color:white;border-color:var(--night);box-shadow:none}
.cta.secondary{background:transparent;color:white;border-color:rgba(255,255,255,.35);box-shadow:none}

/* ---------- 4. Hero con la foto de Valeria ---------- */
.hero{background:var(--night);color:white;overflow:hidden}
.hero-grid{min-height:650px;display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch}
.hero-copy{padding:88px 5vw 82px max(20px,calc((100vw - 1160px)/2));display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:flex;align-items:center;gap:11px;color:#8edff2;font-size:13px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--lime);flex:none}
h1{margin:18px 0 24px;font-size:clamp(44px,6vw,84px);line-height:.96;letter-spacing:-.055em;max-width:780px}
.hero-lede{max-width:650px;color:#c8d6dd;font-size:clamp(18px,2vw,22px);line-height:1.5;margin:0 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.proof{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:42px;color:#d9e5e9;font-size:14px}
.proof span{display:flex;align-items:center;gap:9px}
.proof span::before{content:"✓";display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--lime);color:#132000;font-weight:800;font-size:12px;flex:none}
.hero-image{position:relative;min-height:650px;background:#a6c7d2}
.hero-image img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 28%}
.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,34,.22),transparent 25%)}
.quote{position:absolute;z-index:2;left:28px;right:28px;bottom:28px;background:rgba(7,22,34,.90);padding:20px 22px;border-radius:12px;border-left:4px solid var(--lime);color:white;max-width:500px}
.quote strong{display:block;font-size:17px}.quote small{color:#a9c0ca}

/* ---------- 5. Franja verde ---------- */
.strip{background:var(--lime);color:#172000;padding:16px 0}
.strip-inner{display:flex;gap:30px;justify-content:space-between;align-items:center;font-weight:700}
.strip b{font-family:"IBM Plex Mono",monospace;font-size:19px}

/* ---------- 6. Secciones y pasos ---------- */
section{padding:92px 0}
.section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;align-items:end;margin-bottom:46px}
.kicker{color:var(--brand-deep);font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;margin:0 0 12px}
h2{font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.035em;margin:0}
.section-head p{margin:0;font-size:18px;color:var(--muted);max-width:650px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.step{background:var(--surface);padding:30px 25px;min-height:250px}
.num{font-family:"IBM Plex Mono",monospace;color:var(--brand-deep);font-size:14px;font-weight:600}
.step h3{font-size:22px;line-height:1.16;margin:36px 0 12px}.step p{margin:0;color:var(--muted)}

/* ---------- 7. Lo que ganas + tabla de comisiones (de la base) ---------- */
.earn{background:var(--night-2);color:white}
.earn .kicker{color:#72d8f0}.earn .section-head p{color:#bed0d7}
.earn-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
.rate{background:var(--lime);color:#142000;padding:40px;border-radius:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:390px}
.rate-big{font-family:"IBM Plex Mono",monospace;font-size:clamp(70px,10vw,126px);line-height:.86;letter-spacing:-.08em;font-weight:600}
.rate h3{font-size:24px;margin:24px 0 10px}.rate p{margin:0;max-width:430px}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rule{background:#133345;border:1px solid #29495a;border-radius:14px;padding:24px;min-height:182px}
.rule b{display:block;color:#72d8f0;font-family:"IBM Plex Mono",monospace;font-size:13px;margin-bottom:28px}
.rule h3{margin:0 0 8px;font-size:19px}.rule p{margin:0;color:#bdd0d8;font-size:15px}
.commission-list{margin-top:42px;border:1px solid #29495a;border-radius:16px;overflow:hidden}
.commission-head,.commission-row{display:grid;grid-template-columns:minmax(220px,1.6fr) 1fr 1fr;gap:20px;align-items:center;padding:14px 20px}
.commission-head{background:#071d29;color:#72d8f0;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;text-transform:uppercase}
.commission-row{border-top:1px solid #29495a;color:#dbe8ed}
.commission-row:nth-child(odd){background:#102f40}
.commission-row span:not(:first-child){font-family:"IBM Plex Mono",monospace;color:white}
.commission-soon{margin-top:42px;border:1px dashed #29495a;border-radius:16px;padding:28px;color:#bdd0d8;text-align:center}
.commission-note{margin:16px 0 0;color:#a9c0ca;font-size:13px}

/* ---------- 8. Qué puedes recomendar ---------- */
.sell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sell-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:27px}
.sell-card .tag{display:inline-block;background:var(--soft);color:var(--brand-deep);padding:5px 8px;border-radius:6px;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600}
.sell-card h3{font-size:22px;margin:24px 0 10px}.sell-card p{color:var(--muted);margin:0 0 20px}
.sell-card a{color:var(--brand-deep);font-weight:700;text-decoration:none}.sell-card a:hover{text-decoration:underline}

/* ---------- 9. Preguntas (sin JavaScript: <details>) ---------- */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:22px 0}
summary{cursor:pointer;font-size:19px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brand-deep);font-family:"IBM Plex Mono",monospace}
details[open] summary::after{content:"−"}
details p{color:var(--muted);max-width:800px;margin:12px 0 0}

/* ---------- 10. Cierre y pie ---------- */
.final{padding:90px 0;background:var(--brand);color:#002936}
.final-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.final h2{font-size:clamp(40px,5vw,64px)}.final p{font-size:18px;max-width:650px}
.final-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.final-actions .cta{padding:15px 20px}
.mail{text-align:center;font-size:14px;color:#001f29} /* más oscuro: el anterior no alcanzaba el contraste 4.5:1 */
footer{padding:26px 0;background:var(--night);color:#9eb3bc;font-size:13px}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#d9e6ea}

/* ---------- 11. Tableta ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:72px 32px}.hero-image{min-height:560px}
  .section-head,.earn-layout,.final-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}.sell-grid{grid-template-columns:1fr 1fr}
  .nav-links{gap:16px}.nav-links .nav-sec{display:none}
}

/* ---------- 12. Celular ---------- */
@media(max-width:620px){
  .wrap{width:min(100% - 28px,1160px)}.nav-inner{height:62px;gap:10px}.nav-mark{font-size:11px;gap:8px}.nav-mark::before{width:16px}
  .nav-links{gap:12px;font-size:13px}.nav-links .nav-cta{display:none}
  .hero-copy{padding:58px 20px 50px}.hero-image{min-height:440px}.quote{left:14px;right:14px;bottom:14px}
  .hero-actions{align-items:stretch;flex-direction:column}.hero-actions .cta{width:100%}
  .strip-inner{flex-direction:column;gap:5px;text-align:center}.strip-inner span{font-size:13px}
  section{padding:66px 0}.section-head{gap:20px;margin-bottom:30px}
  .steps,.sell-grid,.rules{grid-template-columns:1fr}.step{min-height:0}.step h3{margin-top:24px}
  .rate{padding:30px;min-height:330px}.rule{min-height:0}
  .commission-head{display:none}
  .commission-row{grid-template-columns:1fr 1fr;gap:6px 14px;padding:16px}
  .commission-row span:first-child{grid-column:1/-1;font-weight:700}
  .commission-row span[data-label]::before{content:attr(data-label) ": ";color:#8fb0bd;font-family:"IBM Plex Sans",sans-serif}
  .final-actions{align-items:stretch}.final-actions .cta{white-space:normal}
}
@media(max-width:360px){
  .nav-login{display:none}
}

/* ---------- 13. Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta{transition:none}}

/* =========================================================
   14. [Autorys · Diseño 2026-10-06] Pulido (el mismo de la portada de autorys.com)
   Pedido de Richard: que se vea más cuidada y menos "plantilla".
   - Logotipo horizontal de Autorys en el menú (antes solo el texto "PROGRAMA DE SOCIOS").
   - Etiquetas, insignias y encabezados de la tabla en la letra normal de la página
     (antes letra de máquina de escribir y MAYÚSCULAS), con una rayita delante como en la portada.
   - Tabla de comisiones: 8 filas a la vista y el resto en "Ver todas las comisiones (N)".
   - Movimiento suave: el inicio entra al cargar, los bloques aparecen al bajar
     (partners-home.js, sección 2), tarjetas que suben un poco al pasar el mouse y
     botones que se "hunden" al tocarlos. Todo se apaga si la persona pidió menos movimiento.
   - Celular: la franja oscura de arriba se desvanece a la derecha (avisa que se recorre con el dedo).
   Este archivo solo lo usa la portada pública (views/public/landing.php).
   ========================================================= */

/* Curvas y tiempos del movimiento (salida rápida y frenado suave) */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* --- Logotipo horizontal + "Programa de socios" pequeño al lado --- */
.nav-brand{display:flex;align-items:center;gap:14px;min-width:0}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{display:block;width:auto;height:38px}
.nav-mark{text-transform:none;font-size:14px;font-weight:600;padding-left:14px;border-left:1px solid var(--line)}
.nav-mark::before{display:none}
@media (prefers-color-scheme:dark){
  /* La palabra AUTORYS es gris oscuro: en modo oscuro va sobre una placa blanca para que se lea */
  .nav-logo img{background:#fff;padding:5px 9px;border-radius:9px;height:40px}
}

/* --- Etiquetas de sección: letra normal, con una rayita delante --- */
.eyebrow{font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:700}
.eyebrow::before{width:22px;border-radius:2px}
.kicker{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:14px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.75;flex:none}
/* Números, insignias y encabezados de la tabla: la misma letra de la página */
.num,.rule b,.sell-card .tag,.strip b{font-family:"IBM Plex Sans",sans-serif;font-weight:700}
.rule b,.sell-card .tag{font-size:13px}
.rate-big{font-family:"IBM Plex Sans",sans-serif;font-weight:700;letter-spacing:-.06em}
.commission-head{font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:700;text-transform:none}
.commission-row span:not(:first-child){font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-variant-numeric:tabular-nums}
summary::after{font-family:"IBM Plex Sans",sans-serif;font-weight:600}

/* --- Tabla de comisiones: el resto de filas dentro de "Ver todas las comisiones (N)" --- */
.commission-more{border:0;padding:0;margin-top:12px}
.commission-more>summary{display:inline-flex;align-items:center;gap:10px;justify-content:flex-start;font-size:15px;font-weight:700;color:#d9f6ff;padding:11px 16px;border:1px solid #29495a;border-radius:10px;background:#102f40;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),transform .16s var(--ease-out)}
.commission-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease-out)}
.commission-more[open]>summary::after{content:"";transform:translateY(2px) rotate(-135deg)}
.commission-more>summary:hover{border-color:#72d8f0;background:#133345}
.commission-more>summary:active{transform:scale(.97)}
.commission-more>summary:focus-visible{outline:3px solid #8edff2;outline-offset:2px}
.commission-more .commission-list{margin-top:12px}
/* Rayado de filas: en este segundo bloque no hay encabezado, se corre uno para que siga alternando */
.commission-more .commission-row:nth-child(odd){background:none}
.commission-more .commission-row:nth-child(even){background:#102f40}
.commission-more .commission-row:first-child{border-top:0}

/* --- Aparecer al bajar: partners-home.js pone .rv en <html> solo si hay JavaScript --- */
.rv [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--rv-i,0) * 70ms)}
.rv [data-rv].in{opacity:1;transform:none}

/* --- Entrada del inicio al cargar (la foto no se anima: es lo primero que pinta la página) --- */
@keyframes rv-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rv-up .7s var(--ease-out) backwards}
.hero-copy>:nth-child(2){animation-delay:.06s}
.hero-copy>:nth-child(3){animation-delay:.12s}
.hero-copy>:nth-child(4){animation-delay:.18s}
.hero-copy>:nth-child(5){animation-delay:.24s}
.quote{animation:rv-up .8s var(--ease-out) .35s backwards}

/* --- Botones que se hunden al tocarlos y tarjetas que responden al mouse --- */
.cta{transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out)}
.cta:active{transform:scale(.97);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.lang-btn{transition:transform .16s var(--ease-out)}
.lang-btn:active{transform:scale(.97)}
.rule,.sell-card,.step{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s var(--ease-out),background-color .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .sell-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
  .rule:hover{transform:translateY(-3px);border-color:#3d6377}
  .step:hover{background:color-mix(in srgb,var(--soft) 55%,var(--surface))}
}
/* En pantallas táctiles el botón no se queda "subido" después de tocarlo */
@media (hover:none){.cta:hover{transform:none}}

/* --- Celular --- */
@media (max-width:700px){
  /* Franja de sitios: un desvanecido a la derecha avisa que se recorre con el dedo */
  .asb .asb-links{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:18px}
}
@media (max-width:620px){
  /* Logotipo arriba y "Programa de socios" pequeño debajo, para que quepan "Entrar" e idioma */
  .nav-brand{flex-direction:column;align-items:flex-start;gap:3px}
  .nav-logo img{height:28px}
  .nav-mark{font-size:11px;padding-left:0;border-left:0;line-height:1.1}
  .commission-more>summary{display:flex;justify-content:center}
}
@media (max-width:620px) and (prefers-color-scheme:dark){
  .nav-logo img{height:30px;padding:4px 8px}
}

/* --- Menos movimiento: todo quieto si la persona lo pidió --- */
@media (prefers-reduced-motion:reduce){
  .rv [data-rv]{opacity:1;transform:none;transition:none}
  .hero-copy>*,.quote{animation:none}
  .cta,.lang-btn,.rule,.sell-card,.step,.commission-more>summary,.commission-more>summary::after{transition:none}
  .cta:active,.lang-btn:active,.commission-more>summary:active,.sell-card:hover,.rule:hover{transform:none}
}