/* ============================================
   aventis.app — micro-site dentro de Asegestor
   Paleta propia (navy + acentos por producto) para diferenciarlo
   visualmente del sitio principal, manteniendo la misma tipografía.
   ============================================ */

:root{
  --app-navy: #0e1b2e;
  --app-navy-deep: #091220;
  --app-ink: #f5f7fa;
  --app-ink-soft: rgba(245,247,250,.72);
  --app-border: rgba(245,247,250,.14);
  --app-card: #13253d;

  --app-yellow: #f4e400;
  --app-purple: #b23fd6;
  --app-teal: #10d3c4;
  --app-orange: #f2994a;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1180px;
}

.app-page{
  margin:0;
  background: var(--app-navy);
  color: var(--app-ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.app-page *, .app-page *::before, .app-page *::after{ box-sizing: border-box; }
.app-page img{ max-width:100%; display:block; }
.app-page a{ color:inherit; text-decoration:none; }
.app-page .container{ max-width: var(--container); margin:0 auto; padding:0 32px; }

.app-page h1, .app-page h2{
  font-family: var(--serif); font-weight:700; color: var(--app-ink); margin:0 0 .4em;
}
.app-page h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height:1.12; }
.app-page h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }

.app-eyebrow{
  font-family: var(--sans); text-transform:uppercase; letter-spacing:.24em;
  font-size:.72rem; font-weight:500; color: var(--app-teal); margin:0 0 .9em;
}
.app-eyebrow-erploop{ color: var(--app-purple); }
.app-eyebrow-biloop{ color: var(--app-yellow); }
.app-eyebrow-cashloop{ color: var(--app-teal); }
.app-eyebrow-kairos{ color: var(--app-orange); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 2.1em; font-family: var(--sans); font-size:.9rem; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid transparent; border-radius:3px;
  cursor:pointer; transition: all .3s var(--ease);
}
.app-page a.app-btn-primary{ background: var(--app-teal); color: var(--app-navy-deep); font-weight:600; }
.app-btn-primary:hover{ transform: translateY(-2px); filter:brightness(1.08); }
.app-btn-ghost{ border-color: rgba(245,247,250,.4); color: var(--app-ink); }
.app-btn-ghost:hover{ background: rgba(245,247,250,.08); transform: translateY(-2px); }
.app-btn-outline{ border-color: var(--app-border); color: var(--app-ink); }
.app-btn-outline:hover{ transform: translateY(-2px); }
.app-btn-erploop:hover{ border-color: var(--app-purple); color: var(--app-purple); }
.app-btn-biloop:hover{ border-color: var(--app-yellow); color: var(--app-yellow); }
.app-btn-cashloop:hover{ border-color: var(--app-teal); color: var(--app-teal); }
.app-btn-kairos:hover{ border-color: var(--app-orange); color: var(--app-orange); }

/* ---------- header ---------- */
.app-header{
  position: sticky; top:0; z-index:100;
  background: rgba(9,18,32,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--app-border);
  padding: 16px 0;
}
.app-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.app-nav{ display:flex; align-items:center; gap:1.4rem; }
.app-nav a{ font-size:.85rem; color: var(--app-ink-soft); transition: color .25s var(--ease); }
.app-nav a:hover{ color: var(--app-ink); }
.app-back{ font-size:.85rem; color: var(--app-ink-soft); }
.app-back:hover{ color: var(--app-ink); }
.app-brand{ display:flex; align-items:center; gap:10px; font-family: var(--serif); font-size:1.2rem; font-weight:600; }
.app-brand-logo{ height:28px; width:auto; }

.lang-switch{
  display:flex; align-items:center; border:1px solid var(--app-border);
  border-radius:999px; padding:3px; gap:2px;
}
.lang-switch-option{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-size:.95rem; line-height:1; padding:.35em .55em; border-radius:999px;
  color:inherit; opacity:.5; transition: all .3s var(--ease);
}
.lang-switch-option:hover{ opacity:.85; }
.lang-switch-option.is-active{ background: rgba(245,247,250,.14); opacity:1; }

/* ---------- hero ---------- */
.app-hero{ padding: 6rem 0 5rem; position:relative; overflow:hidden; }
.app-hero::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 0%, rgba(16,211,196,.16), transparent 55%),
              radial-gradient(ellipse at 85% 30%, rgba(178,63,214,.14), transparent 55%);
  pointer-events:none;
}
.app-hero-inner{ position:relative; max-width: 780px; }
.app-hero-lead{ color: var(--app-ink-soft); font-size:1.08rem; max-width:640px; margin: 1.4rem 0 2.2rem; }
.app-hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- aviso legal 2027 ---------- */
.app-law-banner{ background: var(--app-card); border-top:1px solid var(--app-border); border-bottom:1px solid var(--app-border); padding: 3rem 0; }
.app-law-inner{ display:flex; gap:2rem; align-items:flex-start; }
.app-law-link{ display:inline-block; margin-top:1.2rem; font-size:.9rem; font-weight:600; color: var(--app-teal); }
.app-law-link:hover{ color: var(--app-ink); }
.app-law-badge{
  flex-shrink:0; width:84px; height:84px; border-radius:50%;
  background: linear-gradient(135deg, var(--app-teal), var(--app-purple));
  color: var(--app-navy-deep); font-family: var(--serif); font-weight:700; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
}
.app-law-badge-kairos{
  background: linear-gradient(135deg, var(--app-orange), var(--app-purple));
  font-size:1.05rem; text-align:center; line-height:1.15;
}
.app-law-inner p{ color: var(--app-ink-soft); margin:0; max-width: 780px; }
.app-law-inner strong{ color: var(--app-ink); }

/* ---------- producto ---------- */
.app-product{ padding: 6rem 0; }
.app-product-alt{ background: rgba(245,247,250,.02); }
.app-product-inner{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items:center;
}
.app-product-inner-reverse{ grid-template-columns: 1.2fr .8fr; }
.app-product-inner-reverse .app-product-content{ order:1; }
.app-product-inner-reverse .app-product-media{ order:2; }
.app-product-media{ display:flex; align-items:center; justify-content:center; }

.app-screen-frame{
  width:100%;
  background: var(--app-navy-deep);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.app-screen-bar{
  display:flex; align-items:center; gap:.5rem;
  padding: .8rem 1rem;
  background: rgba(245,247,250,.04);
  border-bottom: 1px solid var(--app-border);
}
.app-screen-dot{
  width:9px; height:9px; border-radius:50%;
  background: rgba(245,247,250,.18);
}
.app-screen-url{
  margin-left: .6rem;
  font-size:.72rem; color: var(--app-ink-soft);
  background: rgba(245,247,250,.05);
  border-radius: 4px; padding:.25em .7em;
}
.app-screen-body{
  padding: 3.2rem 3rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1.4rem;
  min-height: 220px;
}
.app-product-logo{ width: 60%; }
.app-product-logo-dark{ width:50%; }
.app-screen-placeholder{
  margin:0; font-size:.78rem; color: var(--app-ink-soft);
  text-transform:uppercase; letter-spacing:.08em;
}
.app-product-lead{ color: var(--app-ink-soft); font-size:1.02rem; margin-bottom:1.6rem; }
.app-feature-list{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.app-feature-list li{ position:relative; padding-left:1.4rem; color: var(--app-ink-soft); font-size:.94rem; }
.app-feature-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%;
  background: var(--app-teal);
}
.app-feature-list li strong{ color: var(--app-ink); }
.app-product-for{ font-size:.85rem; font-style:italic; color: var(--app-ink-soft); margin-bottom:1.6rem; }
.app-product-soon{ color: var(--app-ink-soft); font-size:.95rem; margin-bottom:1.8rem; }

.app-screen-stack{ display:flex; flex-direction:column; gap:1.3rem; width:100%; }
.app-screen-shot{ line-height:0; }
.app-screen-shot img{ width:100%; display:block; }
.app-screen-caption{
  margin: -0.7rem 0 0; font-size:.78rem; color: var(--app-ink-soft);
  text-align:center; line-height:1.4;
}

.app-highlight-box{
  background: rgba(244,228,0,.06);
  border: 1px solid rgba(244,228,0,.35);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.6rem;
}
.app-highlight-title{
  margin:0 0 .4em; font-weight:700; color: var(--app-yellow); font-size:.98rem;
}
.app-highlight-body{ margin:0; color: var(--app-ink-soft); font-size:.92rem; }

.app-highlight-box-erploop{
  background: rgba(178,63,214,.07);
  border-color: rgba(178,63,214,.35);
}
.app-highlight-title-erploop{ color: var(--app-purple); }

/* ---------- pricing ---------- */
.app-pricing-box{ margin: 0 0 1.8rem; }
.app-pricing-eyebrow{
  font-family: var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:.68rem; font-weight:600; color: var(--app-ink-soft); margin:0 0 .8em;
}
.app-pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.app-pricing-card{
  background: var(--app-card); border:1px solid var(--app-border); border-radius:10px;
  padding: 1.3rem 1.4rem;
}
.app-pricing-card-featured{
  background: rgba(178,63,214,.09); border-color: rgba(178,63,214,.4);
}
.app-pricing-tag{ font-size:.78rem; font-weight:600; color: var(--app-ink-soft); margin:0 0 .5em; }
.app-pricing-card-featured .app-pricing-tag{ color: var(--app-purple); }
.app-pricing-amount{
  font-family: var(--serif); font-weight:700; font-size:1.5rem; color: var(--app-ink);
  margin:0 0 .4em; line-height:1.2;
}
.app-pricing-amount span{ font-family: var(--sans); font-size:.58em; color: var(--app-ink-soft); font-weight:400; }
.app-pricing-note{ font-size:.82rem; color: var(--app-ink-soft); margin:0; line-height:1.45; }
.app-pricing-foot{ font-size:.78rem; color: var(--app-ink-soft); margin:.9rem 0 0; font-style:italic; }

.app-free-tag{
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:600;
  letter-spacing:.04em; color: var(--app-yellow); background: rgba(244,228,0,.1);
  border: 1px solid rgba(244,228,0,.3); border-radius: 20px; padding:.35em .9em;
  margin: 0 0 1.1em;
}

.app-standalone-box{
  background: rgba(16,211,196,.06); border: 1px solid rgba(16,211,196,.3);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin: 0 0 1.6rem;
}
.app-standalone-title{ margin:0 0 .4em; font-weight:700; color: var(--app-teal); font-size:.98rem; }
.app-standalone-body{ margin:0; color: var(--app-ink-soft); font-size:.92rem; }

@media (max-width: 640px){
  .app-pricing-grid{ grid-template-columns:1fr; }
}

/* ---------- faq ---------- */
.app-faq{ padding: 6rem 0; background: rgba(245,247,250,.02); }
.app-faq-inner{ max-width: 760px; margin: 0 auto; }
.app-faq-inner h2{ margin: 0 0 2rem; }
.app-faq-list{ display:flex; flex-direction:column; gap:.8rem; }
.app-faq-item{
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
}
.app-faq-item summary{
  cursor:pointer; font-weight:600; color: var(--app-ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.app-faq-item summary::-webkit-details-marker{ display:none; }
.app-faq-item summary::after{
  content:'+'; font-size:1.3rem; color: var(--app-teal); flex-shrink:0; line-height:1;
}
.app-faq-item[open] summary::after{ content:'\2212'; }
.app-faq-item p{ margin: .9rem 0 0; color: var(--app-ink-soft); font-size:.94rem; line-height:1.6; }

/* ---------- cta ---------- */
.app-cta{ padding: 6rem 0; text-align:center; background: var(--app-card); }
.app-cta-inner{ max-width: 700px; margin:0 auto; }
.app-cta-inner p{ color: var(--app-ink-soft); margin: 0 0 2rem; }
.app-cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.app-btn-icon{ border-radius: 5px; flex-shrink:0; display:block; }

.app-page a.app-whatsapp-btn{
  display:inline-flex; align-items:center; gap:.6em;
  background: #25D366; color:#0e1b2e; border-color:#25D366;
}
.app-page a.app-whatsapp-btn:hover{ filter:brightness(1.08); transform: translateY(-2px); }

.app-page a.app-email-btn{
  display:inline-flex; align-items:center; gap:.6em;
  background: var(--app-teal); color: var(--app-navy-deep); border-color: var(--app-teal);
}
.app-page a.app-email-btn:hover{ filter:brightness(1.08); transform: translateY(-2px); }

/* ---------- recursos (hub) ---------- */
.app-resources-hero{ padding: 5rem 0 3rem; text-align:center; }
.app-resources-hero h1{ max-width: 780px; margin: 0 auto; }
.app-resources-hero p{ color: var(--app-ink-soft); max-width: 640px; margin: 1.2rem auto 0; }

.app-resources-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
  padding: 2rem 0 6rem;
}
.app-resource-card{
  display:flex; flex-direction:column;
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 10px;
  padding: 2rem; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.app-resource-card:hover{ transform: translateY(-4px); border-color: var(--app-teal); }
.app-resource-card .app-eyebrow{ margin-bottom: .6em; }
.app-resource-card h2{ font-size: 1.3rem; margin: 0 0 .8rem; }
.app-resource-card p{ color: var(--app-ink-soft); font-size: .92rem; flex:1; margin: 0 0 1.4rem; }
.app-resource-card a{ font-size: .85rem; font-weight:600; color: var(--app-teal); }
.app-resource-card a:hover{ color: var(--app-ink); }

/* ---------- recursos (article) ---------- */
.app-article{ padding: 5rem 0 6rem; }
.app-article-inner{ max-width: 720px; margin: 0 auto; }
.app-article-inner h1{ margin-bottom: .6rem; }
.app-article-meta{ color: var(--app-ink-soft); font-size: .85rem; margin: 0 0 2.4rem; }
.app-article-inner h2{
  font-family: var(--serif); color: var(--app-ink); font-weight:700;
  font-size: 1.5rem; margin: 2.6rem 0 1rem;
}
.app-article-inner p{ color: var(--app-ink-soft); line-height:1.75; margin: 0 0 1.2rem; }
.app-article-inner p strong{ color: var(--app-ink); }
.app-article-inner ul{ color: var(--app-ink-soft); line-height:1.75; padding-left: 1.3rem; margin: 0 0 1.4rem; }
.app-article-inner li{ margin-bottom: .5rem; }
.app-article-cta{
  margin-top: 3rem; padding: 2rem; text-align:center;
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 10px;
}
.app-article-cta p{ margin: 0 0 1.2rem; }
.app-article-back{ display:inline-block; margin-bottom: 2.4rem; font-size:.85rem; color: var(--app-ink-soft); }
.app-article-back:hover{ color: var(--app-ink); }

@media (max-width: 860px){
  .app-resources-grid{ grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.app-footer{ padding: 2rem 0; border-top:1px solid var(--app-border); }
.app-footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.82rem; color: var(--app-ink-soft);
}
.app-footer-inner a:hover{ color: var(--app-ink); }

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0; transform: translateY(26px) scale(.985);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

.app-product-media{ transition: transform .5s var(--ease); }
.app-product:hover .app-product-media{ transform: translateY(-4px); }
.app-law-badge{ transition: transform .4s var(--ease); }
.app-law-banner:hover .app-law-badge{ transform: scale(1.06) rotate(-4deg); }

/* ============ responsive ============ */
@media (max-width: 860px){
  .app-product-inner, .app-product-inner-reverse{ grid-template-columns:1fr; gap:2.4rem; }
  .app-product-inner-reverse .app-product-content, .app-product-inner-reverse .app-product-media{ order:initial; }
  .app-law-inner{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .app-header-inner{ flex-wrap:wrap; gap:.8rem; }
}
@media (max-width: 480px){
  .app-page .container{ padding:0 20px; }
  .app-hero{ padding: 4rem 0 3rem; }
  .app-product{ padding: 4rem 0; }
}

/* ---------- accesibilidad: skip link ---------- */
.skip-link{
  position: absolute; top:-60px; left:0; z-index: 2000;
  background: var(--app-navy-deep); color: var(--app-ink);
  padding: .8em 1.4em; font-size:.9rem; font-weight:600;
  border-radius: 0 0 6px 0; transition: top .2s ease;
}
.skip-link:focus{ top:0; }