/* ==========================================================================
   Narval Technologies — Páginas de producto (Aura, Kura)
   Extiende site.css. Cada página define su acento con .theme-aura / .theme-kura
   ========================================================================== */

.theme-aura{
  --accent:var(--aura); --accent-dark:var(--aura-dark); --accent-bg:var(--aura-bg);
  --accent-light:#ffb27a; --accent-rgb:239,124,51;
}
.theme-kura{
  --accent:var(--kura); --accent-dark:var(--kura-dark); --accent-bg:var(--kura-bg);
  --accent-light:#8ccbf7; --accent-rgb:47,143,214;
}

/* ---------- Botón de acento ---------- */
.btn-accent{
  background:var(--accent); color:var(--ocean-950);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 24px -6px rgba(var(--accent-rgb),.6);
}
.btn-accent:hover{ background:var(--accent-light); box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 12px 32px -6px rgba(var(--accent-rgb),.75); }

.kicker{ color:var(--accent-dark); }
.on-dark .kicker{ color:var(--accent-light); }
.h2 .serif,.section-head h2 .serif{ color:var(--accent-dark); }
.on-dark .h2 .serif{ color:var(--accent-light); }

/* ---------- Hero de producto ---------- */
.p-hero::before{
  background:
    radial-gradient(55% 55% at 80% 35%, rgba(var(--accent-rgb),.26), transparent 70%),
    radial-gradient(40% 40% at 5% 95%, rgba(0,180,166,.16), transparent 70%),
    linear-gradient(180deg, var(--ocean-950), var(--ocean-900));
}
.p-hero .eyebrow-pill .tag{ background:rgba(var(--accent-rgb),.18); color:var(--accent-light); }
.p-hero h1 .serif{ color:var(--accent-light); }
.p-hero h1{ max-width:14ch; }
.p-hero .hero-note svg{ color:var(--accent-light); }

/* La tarjeta flotante cuelga bajo la foto para no tapar a la persona. */
.p-visual{ position:relative; padding:0 0 110px 40px; }
.p-photo{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/4.4;
  box-shadow:var(--shadow-lg); border:1px solid rgba(232,241,244,.12);
}
.p-photo img{ width:100%; height:100%; object-fit:cover; }
.p-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(3,17,26,.55));
}
.p-visual .mock{ animation:float 10s ease-in-out infinite; }
.p-visual .mock-a{ left:0; bottom:0; width:min(300px, 72%); z-index:2; }

/* ---------- Funcionalidades ---------- */
.feat-featured{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 4vw, 56px); align-items:center;
  padding:clamp(28px, 4vw, 52px); margin-bottom:20px; border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--accent-bg), var(--white) 70%);
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.feat-featured h3{ font-size:clamp(26px, 1.3rem + 1.2vw, 36px); letter-spacing:-.035em; margin:14px 0 12px; }
.feat-featured h3 .serif{ color:var(--accent-dark); }
.feat-featured > div > p{ color:var(--text-2); font-size:16px; max-width:48ch; margin-bottom:20px; }
.feat-featured .mock{ position:relative; box-shadow:var(--shadow-md); border-color:var(--line); }
.feat-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-dark); background:var(--white); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  padding:5px 10px; border-radius:999px;
}

.feat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; list-style:none; }
.feat-card{
  padding:28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition-property:transform, box-shadow, border-color; transition-duration:var(--dur); transition-timing-function:var(--ease-out);
}
.feat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.feat-card .ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--accent-bg); color:var(--accent-dark);
}
.feat-card h3{ font-size:18px; letter-spacing:-.02em; margin-bottom:8px; }
.feat-card p{ font-size:14.5px; color:var(--text-2); }

/* ---------- Precios ---------- */
.pricing{ background:var(--surface); }
.pricing .section-head{ grid-template-columns:1fr; justify-items:center; text-align:center; }
.pricing .section-head h2{ margin-inline:auto; }
.pricing .section-head p{ margin-inline:auto; }

.billing{ display:flex; justify-content:center; margin:-16px 0 44px; }
.billing-toggle{
  display:inline-flex; gap:4px; padding:5px; border-radius:14px;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.billing-toggle button{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border-radius:10px;
  border:0; background:none; cursor:pointer; font-weight:600; font-size:14.5px; color:var(--text-2);
  transition-property:background-color, color, box-shadow; transition-duration:var(--dur-fast);
}
.billing-toggle button:hover{ color:var(--ink); }
.billing-toggle button[aria-pressed="true"]{ background:var(--ocean-900); color:var(--white); box-shadow:var(--shadow-sm); }
.save-badge{
  font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:var(--accent-bg); color:var(--accent-dark);
}
.billing-toggle button[aria-pressed="true"] .save-badge{ background:var(--accent); color:var(--ocean-950); }

.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch; list-style:none; }
.plan{
  position:relative; display:flex; flex-direction:column; padding:32px 28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
}
.plan.popular{
  background:var(--ocean-900); color:var(--on-ocean); border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 30px 60px -20px rgba(var(--accent-rgb),.45);
  transform:translateY(-12px); isolation:isolate; overflow:hidden;
}
.plan.popular::before{
  content:''; position:absolute; inset:-30% -30% auto auto; width:80%; height:60%; z-index:-1;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.35), transparent);
}
.popular-badge{
  position:absolute; top:20px; right:20px; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:var(--accent); color:var(--ocean-950);
}
.plan-tier{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); }
.plan.popular .plan-tier{ color:var(--accent-light); }
.plan-name{ font-size:26px; font-weight:700; letter-spacing:-.03em; margin:6px 0 4px; }
.plan-desc{ font-size:14.5px; color:var(--text-2); min-height:44px; }
.plan.popular .plan-desc{ color:var(--on-ocean-2); }
.plan-price{ display:flex; align-items:baseline; gap:2px; margin:22px 0 2px; font-variant-numeric:tabular-nums; }
.plan-price .cur{ font-size:22px; font-weight:600; align-self:flex-start; margin-top:8px; }
.plan-amount{ font-size:56px; font-weight:700; letter-spacing:-.05em; line-height:1; }
.plan-was{ margin-left:10px; font-size:15px; color:var(--text-3); text-decoration:line-through; }
.plan.popular .plan-was{ color:var(--on-ocean-2); }
.plan-billing{ display:block; font-size:13px; color:var(--text-3); margin-bottom:24px; }
.plan.popular .plan-billing{ color:var(--on-ocean-2); }
.plan .btn{ width:100%; margin-bottom:26px; }
.plan .btn-outline{ box-shadow:none; }
.plan-features{ list-style:none; display:flex; flex-direction:column; gap:10px; padding-top:22px; border-top:1px solid var(--line); }
.plan.popular .plan-features{ border-color:rgba(232,241,244,.12); }
.plan-features li{ display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.plan.popular .plan-features li{ color:var(--on-ocean); }
.plan-features li::before{
  content:''; width:18px; height:18px; margin-top:1px; background:var(--accent-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan.popular .plan-features li::before{ background:var(--accent-light); }
.plan-features b{ font-weight:600; color:var(--ink); }
.plan.popular .plan-features b{ color:var(--white); }
.pricing-note{ text-align:center; margin-top:36px; font-size:14px; color:var(--text-3); }
.pricing-note a{ color:var(--accent-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Tabla comparativa ---------- */
.compare{ margin-top:64px; }
.compare-title{ font-size:clamp(20px, 1rem + .6vw, 26px); letter-spacing:-.02em; text-align:center; margin-bottom:24px; }
/* position:relative contiene los textos .sr-only (absolutos) dentro del scroll. */
.compare-scroll{
  position:relative; overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.compare-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; }
.compare-table th,.compare-table td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle; }
.compare-table tbody tr:last-child > *{ border-bottom:0; }
.compare-table thead th{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); background:var(--surface); }
.compare-table th[scope="row"]{ text-align:left; font-weight:500; color:var(--ink); white-space:nowrap; }
.compare-table thead th:first-child{ text-align:left; }
.compare-table td{ color:var(--text-2); }
.compare-table tbody tr:hover > *{ background:color-mix(in srgb, var(--accent-bg) 45%, var(--white)); }
.compare-table .is-top{ background:color-mix(in srgb, var(--accent-bg) 60%, var(--white)); color:var(--ink); }
.compare-table thead .is-top{ color:var(--accent-dark); background:var(--accent-bg); }
.compare-table b{ font-weight:600; color:var(--ink); }
.compare-table .yes,.compare-table .no{ display:inline-block; width:18px; height:18px; vertical-align:middle; }
.compare-table .yes{
  background:var(--accent-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.compare-hint{ display:none; margin:-12px 0 12px; font-size:13px; color:var(--text-3); text-align:center; }
.compare-table .no{ position:relative; }
.compare-table .no::before{ content:''; position:absolute; left:4px; right:4px; top:50%; height:1.5px; background:#b6c1c8; border-radius:2px; }

/* ---------- Pasos (3 columnas) ---------- */
.steps.steps-3{ grid-template-columns:repeat(3, 1fr); }
.steps .step:first-child .step-num{ background:var(--accent); border-color:var(--accent); color:var(--ocean-950); }
.step .meta{ color:var(--accent-dark); background:var(--accent-bg); }
.step-num{ color:var(--accent-dark); }

/* ---------- Testimonio destacado ---------- */
.quote-band{ background:var(--ocean-950); color:var(--on-ocean); overflow:hidden; isolation:isolate; }
.quote-band::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(45% 70% at 50% 100%, rgba(var(--accent-rgb),.22), transparent 70%), var(--chevron);
  background-size:auto, 56px 28px; opacity:.85;
  -webkit-mask-image:linear-gradient(0deg, #000, transparent 85%);
  mask-image:linear-gradient(0deg, #000, transparent 85%);
}
.big-quote{ max-width:900px; margin-inline:auto; text-align:center; }
.big-quote blockquote{ font-size:clamp(24px, 1.1rem + 1.8vw, 38px); line-height:1.3; letter-spacing:-.025em; font-weight:500; color:var(--white); text-wrap:balance; }
.big-quote blockquote::before{ content:'“'; display:block; font-family:var(--font-serif); font-size:96px; line-height:.5; color:var(--accent-light); margin-bottom:28px; }
.big-quote figcaption{ display:inline-flex; align-items:center; gap:12px; margin-top:36px; text-align:left; }
.big-quote cite{ font-style:normal; font-weight:600; display:block; color:var(--white); }
.big-quote .role{ font-size:14px; color:var(--on-ocean-2); }

/* ---------- FAQ y contacto con acento ---------- */
.faq-list summary:hover{ color:var(--accent-dark); }
.faq-list details[open] summary .plus{ background:var(--accent); border-color:var(--accent); }
.faq-list .answer a{ color:var(--accent-dark); }
.contact-side::before{
  background:radial-gradient(70% 50% at 100% 100%, rgba(var(--accent-rgb),.32), transparent 70%), var(--chevron);
  background-size:auto, 56px 28px;
}
.contact-side .h2 .serif{ color:var(--accent-light); }
.contact-side .checks svg{ color:var(--accent-light); }

/* ---------- Otros productos ---------- */
.cross-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cross-card{
  --c:var(--teal); --c-dark:var(--teal-700); --c-bg:var(--teal-50);
  display:grid; grid-template-columns:48px 1fr 24px; gap:18px; align-items:center;
  padding:26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition-property:transform, box-shadow, border-color; transition-duration:var(--dur); transition-timing-function:var(--ease-out);
}
.cross-card.aura{ --c:var(--aura); --c-dark:var(--aura-dark); --c-bg:var(--aura-bg); }
.cross-card.kura{ --c:var(--kura); --c-dark:var(--kura-dark); --c-bg:var(--kura-bg); }
.cross-card.axia{ --c:var(--axia); --c-dark:var(--axia-dark); --c-bg:var(--axia-bg); }
.cross-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--c) 40%, var(--line)); }
.cross-card .ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--c-bg); color:var(--c-dark); }
.cross-card small{ display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-dark); }
.cross-card h3{ font-size:20px; letter-spacing:-.02em; margin:2px 0 4px; }
.cross-card p{ font-size:14.5px; color:var(--text-2); }
.cross-card .arrow{ color:var(--text-3); transition:transform var(--dur-fast) ease-out, color var(--dur-fast); }
.cross-card:hover .arrow{ transform:translateX(4px); color:var(--c-dark); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .p-visual{ max-width:520px; width:100%; margin-inline:auto; }
  .feat-featured{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan.popular{ transform:none; }
}
@media (max-width:860px){
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .cross-grid{ grid-template-columns:1fr; }
  .steps.steps-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .p-visual{ padding:0 0 190px 12px; }
  .p-visual .mock-a{ width:86%; }
  .feat-grid{ grid-template-columns:1fr; }
  .billing-toggle button{ padding:0 12px; }
  .plan-amount{ font-size:48px; }
  .cross-card{ grid-template-columns:44px 1fr; }
  .cross-card .arrow{ display:none; }
  .nav-cta .btn-accent{ display:none; }

  /* Tabla: columna de características fija al deslizar */
  .compare-hint{ display:block; }
  .compare-table{ min-width:560px; font-size:13.5px; }
  .compare-table th,.compare-table td{ padding:12px 14px; }
  .compare-table th[scope="row"],.compare-table thead th:first-child{
    position:sticky; left:0; z-index:3; background:var(--white);
    white-space:normal; min-width:140px; box-shadow:1px 0 0 var(--line);
  }
  .compare-table thead th:first-child{ background:var(--surface); }
}