@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   CLINIPET — landing
   Estructura inspirada en gvetsoft.com · tipografía DM Sans (la misma que usan)
   Paleta clara con el verde Clinipet como color de marca.
   ========================================================================= */

:root {
  color-scheme: light;                 /* la landing es siempre clara */

  --ink:        #1b3a33;
  --ink-soft:   #5d7f74;
  --ink-faint:  #8aa79c;
  --paper:      #ffffff;
  --paper-alt:  #f4fbf7;
  --card:       #ffffff;
  --line:       #e2f0e8;

  /* verde Clinipet */
  --green-900:  #0c6b4a;
  --green-800:  #0f7f5a;
  --green-700:  #149468;
  --green-600:  #1cab79;
  --green-500:  #2fc08c;               /* verde claro: el símbolo */
  --green-300:  #7fdcb6;
  --green-100:  #d5f4e6;
  --green-050:  #edfbf4;

  /* turquesa y azul del logo */
  --cyan-600:   #0f8ba8;
  --cyan-500:   #16b0cd;
  --cyan-300:   #7fdaea;
  --cyan-050:   #e6f8fc;
  --navy:       #1b3a5c;

  --wa:         #25d366;

  --shadow-sm:  0 1px 2px rgba(27,58,51,.05);
  --shadow:     0 1px 2px rgba(27,58,51,.04), 0 12px 30px -16px rgba(27,58,51,.18);
  --shadow-lg:  0 40px 80px -44px rgba(20,148,104,.38);

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x:hidden: evita el scroll horizontal en móvil si algún bloque
   (botones largos, números grandes) intentara salirse del ancho de pantalla. */
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; overflow-wrap: break-word; }
p { margin: 0; overflow-wrap: break-word; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

section { position: relative; overflow: hidden; padding: clamp(54px, 7vw, 96px) 0; }
.band-alt { background: var(--paper-alt); }
.band-green { background: var(--green-050); }

/* =========================================================================
   FONDOS ANIMADOS
   Manchas de color que flotan lentamente (el efecto "gif" pero en CSS:
   pesa 0 KB, no pixela y se apaga solo si el usuario pide menos movimiento).
   ========================================================================= */
.aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora span {
  position:absolute; display:block; border-radius:50%;
  filter: blur(70px); opacity:.55; will-change: transform;
}
.aurora span:nth-child(1) {
  width:46vw; height:46vw; min-width:340px; min-height:340px;
  background: radial-gradient(circle at 35% 35%, var(--green-300), transparent 68%);
  top:-14%; left:-8%; animation: drift-a 26s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width:40vw; height:40vw; min-width:300px; min-height:300px;
  background: radial-gradient(circle at 60% 40%, var(--cyan-300), transparent 68%);
  top:-6%; right:-10%; animation: drift-b 32s ease-in-out infinite;
}
.aurora span:nth-child(3) {
  width:34vw; height:34vw; min-width:260px; min-height:260px;
  background: radial-gradient(circle at 50% 50%, var(--green-100), transparent 70%);
  bottom:-18%; left:32%; animation: drift-c 29s ease-in-out infinite;
}
@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(9vw, 5vh, 0) scale(1.14); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  50%     { transform: translate3d(-8vw, 7vh, 0) scale(.92); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0) scale(.95); }
  50%     { transform: translate3d(-6vw,-6vh, 0) scale(1.16); }
}
/* malla de puntos suave sobre el aurora */
.aurora::after {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(27,58,51,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}
.aurora.soft span { opacity:.4; filter: blur(80px); }
/* el contenido siempre por encima del fondo animado */
section > .wrap { position: relative; z-index: 1; }
/* el aurora nunca ocupa celda del grid: se queda absoluto detrás del contenido */
.free-hero > .aurora, .cta > .aurora { position: absolute; inset: 0; z-index: 0; }

/* ---------- LOGO ---------- */
/* flex:none en el logo y en sus imágenes: si el nav se queda sin espacio, el
   navegador encoge los <img> a lo ancho y el logo sale aplastado. */
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.logo .mark { width:auto; height:38px; flex:none; display:block; object-fit:contain; }
.logo .wordmark { width:auto; height:24px; flex:none; display:block; object-fit:contain; }
.logo picture { display:block; line-height:0; }
@media (max-width: 560px) { .logo .mark { height:33px; } .logo .wordmark { height:21px; } }

.logo-stacked { display:block; }
.logo-stacked img { width:146px; height:auto; display:block; }

/* ---------- NAV ---------- */
header.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; gap:20px; height: 72px; }
.nav-links { display:flex; align-items:center; gap:22px; margin-left:auto; min-width:0; }
.nav-links a.link { text-decoration:none; font-size:15px; font-weight:500; color: var(--ink-soft); white-space:nowrap; }
.nav-links a.link:hover { color: var(--green-700); }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:22px; flex:none; }
/* con 6 enlaces el menú necesita ~1300px; bajo eso se ocultan y quedan los botones */
@media (max-width: 1300px) { .nav-links a.link { display:none; } .nav-actions { margin-left:auto; } }
/* en pantallas chicas: se oculta "Iniciar sesión" y el CTA usa etiqueta corta */
.lbl-short { display:none; }
@media (max-width: 620px) {
  .nav-actions .btn-ghost { display:none; }
  .lbl-full { display:none; }
  .lbl-short { display:inline; }
}

/* ---------- BOTONES ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; font-family: var(--font); font-weight:700; font-size:15.5px;
  letter-spacing:-.01em; padding:13px 22px; border-radius: var(--r-sm);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width:18px; height:18px; flex:none; }
.btn-sm { padding:10px 17px; font-size:14.5px; }
.btn-lg { padding:17px 30px; font-size:17px; border-radius:14px; }
.btn-primary { background: var(--green-600); color:#fff; box-shadow: 0 12px 26px -12px rgba(28,171,121,.85); }
.btn-primary:hover { background: var(--green-700); box-shadow: 0 16px 32px -12px rgba(28,171,121,.9); }
.btn-ghost { background:#fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--green-500); color: var(--green-700); }
.btn-wa { background: var(--wa); color:#06331b; box-shadow: 0 12px 26px -12px rgba(37,211,102,.9); }

/* ---------- ENCABEZADOS DE SECCIÓN ---------- */
.sec-head { text-align:center; max-width: 66ch; margin: 0 auto clamp(36px, 4.5vw, 56px); }
.tag {
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color: var(--green-700);
  background: var(--green-050); border:1px solid var(--green-100);
  padding:6px 13px; border-radius:999px;
}
.sec-head h2 { font-size: clamp(28px, 3.8vw, 44px); margin:16px 0 12px; text-wrap: balance; }
.sec-head p { color: var(--ink-soft); font-size:17.5px; }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow:hidden; text-align:center;
  padding: clamp(52px, 7vw, 88px) 0 0;
  background: linear-gradient(180deg, var(--green-050) 0%, #ffffff 70%);
}
.hero > .wrap { position: relative; z-index: 1; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--green-100);
  color: var(--green-700); font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:999px; box-shadow: var(--shadow-sm);
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 62px); font-weight:700; letter-spacing:-.04em;
  line-height: 1.06; margin: 22px auto 0; max-width: 16ch; text-wrap: balance;
}
.hero h1 em { font-style:normal; color: var(--green-600); }
.hero .sub { font-size: clamp(17px, 1.9vw, 20px); color: var(--ink-soft); max-width: 62ch; margin: 22px auto 0; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero-mini { display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:14.5px; color: var(--ink-soft); }
.hero-mini span { display:inline-flex; align-items:center; gap:7px; font-weight:500; }
.hero-mini svg { width:17px; height:17px; color: var(--green-500); }

/* mockups del producto */
.showcase {
  display:flex; align-items:flex-end; justify-content:center; gap:26px;
  margin-top: clamp(42px, 5vw, 66px); padding-bottom: 6px;
}
/* Bajo 900px el panel ya no cabe al lado de los teléfonos y el hero lo recortaba.
   Solución: el panel toma la línea completa y los dos teléfonos bajan debajo,
   lado a lado, encogiéndose para no salirse nunca del ancho de pantalla. */
@media (max-width: 900px) {
  .showcase {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    justify-items: center; align-items: start;
    max-width: 540px; margin-inline: auto;
  }
  .showcase .browser { order:-1; grid-column: 1 / -1; width: 100%; max-width: none; border-radius: 16px; }
  .showcase .phone { width: 100%; max-width: 208px; }
}
@media (max-width: 560px) {
  .browser .body { grid-template-columns: 96px 1fr; }
  .browser .kpi b { font-size:15px; }
}

.mock { background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-lg); }
.browser { width: min(620px, 100%); border-radius: 16px 16px 0 0; overflow:hidden; }
.browser .chrome { display:flex; align-items:center; gap:6px; padding:11px 14px; background: var(--paper-alt); border-bottom:1px solid var(--line); }
.browser .chrome i { width:9px; height:9px; border-radius:50%; background:#d6e8de; display:block; }
.browser .chrome .url { margin-left:10px; flex:1; height:21px; border-radius:7px; background:#fff; border:1px solid var(--line); font-size:10.5px; color: var(--ink-faint); display:flex; align-items:center; padding:0 9px; }
.browser .body { display:grid; grid-template-columns: 112px 1fr; min-height: 268px; text-align:left; }
.browser .side { background: var(--green-050); border-right:1px solid var(--line); padding:14px 11px; display:flex; flex-direction:column; gap:7px; }
.browser .side b { color: var(--green-800); font-size:12px; letter-spacing:-.02em; margin-bottom:5px; padding:0 7px; }
.browser .side span { font-size:10.5px; color: var(--ink-soft); padding:6px 8px; border-radius:7px; }
.browser .side span.on { background: var(--green-600); color:#fff; font-weight:600; }
.browser .main { padding:16px; display:flex; flex-direction:column; gap:11px; }
.browser .kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:9px; }
.browser .kpi { border:1px solid var(--line); border-radius:10px; padding:9px 11px; background: var(--paper-alt); }
.browser .kpi u { display:block; text-decoration:none; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; }
.browser .kpi b { font-size:17px; color: var(--green-700); letter-spacing:-.02em; }
.browser .row { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:11px; }
.browser .row .dot { width:7px; height:7px; border-radius:50%; background: var(--green-500); flex:none; }
.browser .row .who { font-weight:600; }
.browser .row .when { margin-left:auto; color: var(--ink-faint); font-size:10.5px; }
.browser .row .pill { background: var(--cyan-050); color: var(--cyan-600); font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:999px; }

.phone { width: 208px; border-radius: 28px; padding: 9px; flex:none; }
.phone .screen { background: var(--paper-alt); border-radius: 21px; overflow:hidden; text-align:left; }
.phone .top { background: linear-gradient(140deg, var(--green-500), var(--cyan-500)); color:#fff; padding:16px 14px 15px; }
.phone .top u { text-decoration:none; font-size:9.5px; opacity:.9; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.phone .top b { display:block; font-size:14.5px; margin-top:3px; letter-spacing:-.02em; }
.phone .list { padding:11px; display:flex; flex-direction:column; gap:8px; }
.phone .item { background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 11px; }
.phone .item b { display:block; font-size:11.5px; }
.phone .item span { font-size:10px; color: var(--ink-soft); }
.phone .item .tagline { display:inline-block; margin-top:5px; font-size:9px; font-weight:700; color: var(--green-700); background: var(--green-050); padding:2px 7px; border-radius:999px; }

/* ---------- PILARES ---------- */
.pillars { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
@media (max-width: 940px) { .pillars { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding:28px 24px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(20,148,104,.4); }
.pillar .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:23px; background: var(--green-050); border:1px solid var(--green-100); margin-bottom:17px; }
.pillar h3 { font-size:18.5px; margin-bottom:8px; }
.pillar p { font-size:15px; color: var(--ink-soft); line-height:1.55; }

/* ---------- VIDEO ---------- */
.video-frame {
  max-width: 940px; margin: 0 auto; border-radius: var(--r-lg); overflow:hidden;
  box-shadow: var(--shadow-lg); border:1px solid var(--line); background:#eef6f1; aspect-ratio: 16 / 9;
}
.video-frame video { width:100%; height:100%; display:block; object-fit: cover; }

/* ---------- BLOQUES ALTERNADOS ---------- */
.split { display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 62px); align-items:center; }
.split + .split { margin-top: clamp(50px, 6vw, 82px); }
.split.rev .split-text { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap:32px; } .split.rev .split-text { order:0; } }
.split-text h2 { font-size: clamp(25px, 3.1vw, 36px); margin:14px 0 14px; text-wrap:balance; }
.split-text p { color: var(--ink-soft); font-size:17px; }
.split-list { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.split-list li { display:flex; gap:11px; align-items:flex-start; font-size:16px; }
.split-list svg { width:20px; height:20px; flex:none; color: var(--green-500); margin-top:3px; }

/* integración de pago (Mercado Pago) */
.pay-box {
  margin-top:26px; background:#fff; border:1px solid var(--line); border-left:4px solid #009ee3;
  border-radius: var(--r-sm); padding:20px 22px; box-shadow: var(--shadow-sm);
  display:flex; gap:20px; align-items:flex-start;
}
@media (max-width: 560px) { .pay-box { flex-direction:column; gap:14px; } }
.pay-logo { width:150px; height:auto; flex:none; margin-top:2px; }
.pay-text b { display:block; font-size:15.5px; margin-bottom:6px; }
.pay-text p { font-size:14.5px; color: var(--ink-soft); line-height:1.55; }
.pay-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pay-chips span { font-size:12.5px; font-weight:600; color: var(--ink-soft); background: var(--paper-alt); border:1px solid var(--line); padding:5px 11px; border-radius:999px; }

.tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2,1fr); } }
.tile { background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); padding:20px 15px; text-align:center; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tile:hover { transform: translateY(-4px); border-color: var(--green-300); box-shadow: var(--shadow); }
.tile .ic { font-size:25px; display:block; margin-bottom:9px; }
.tile b { display:block; font-size:14.5px; }
.tile span { font-size:12.5px; color: var(--ink-soft); line-height:1.45; display:block; margin-top:3px; }

/* ---------- ATENCIÓN A DOMICILIO ---------- */
.home-card {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--cyan-050), #ffffff 55%, var(--green-050));
  border: 2px solid var(--green-100); border-radius: var(--r-lg);
  padding: clamp(32px, 4.5vw, 58px);
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 56px); align-items:center;
  box-shadow: var(--shadow);
}
.home-card > .aurora { position:absolute; inset:0; z-index:0; }
.home-card > .hv-text, .home-card > .hv-modes { position:relative; z-index:1; }
@media (max-width: 900px) { .home-card { grid-template-columns: 1fr; } }
.hv-text h2 { font-size: clamp(25px, 3.1vw, 36px); margin:14px 0 14px; text-wrap:balance; }
.hv-text p { color: var(--ink-soft); font-size:17px; }

.hv-modes { display:flex; flex-direction:column; gap:12px; }
.hv-modes-label { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:2px; }
.mode { background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow: var(--shadow-sm); }
.mode .ic { font-size:24px; flex:none; }
.mode b { display:block; font-size:15.5px; }
.mode u { display:block; text-decoration:none; font-size:13.5px; color: var(--ink-soft); margin-top:2px; }

/* ---------- GRATIS DE POR VIDA ---------- */
.free-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--green-050), #ffffff 55%, var(--cyan-050));
  border: 2px solid var(--green-100);
  border-radius: var(--r-lg); padding: clamp(36px, 5vw, 62px);
  display:grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 54px); align-items:center;
  box-shadow: var(--shadow);
}
.free-hero > * { position: relative; z-index: 1; }
@media (max-width: 820px) { .free-hero { grid-template-columns: 1fr; text-align:center; } }
.free-price { font-size: clamp(76px, 12vw, 132px); font-weight:800; letter-spacing:-.05em; line-height:.85; color: var(--green-600); }
.free-price small { font-size: 22px; font-weight:600; color: var(--ink-soft); letter-spacing:-.01em; }
.free-price u { display:block; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--green-700); margin-bottom:14px; }
.free-hero h2 { font-size: clamp(26px, 3.4vw, 40px); text-wrap:balance; }
.free-hero p { color: var(--ink-soft); font-size:17.5px; margin-top:14px; max-width: 54ch; }
.free-hero p strong { color: var(--green-700); }
@media (max-width: 820px) { .free-hero p { margin-inline:auto; } }
.free-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
@media (max-width: 820px) { .free-badges { justify-content:center; } }
.free-badges span { background:#fff; border:1px solid var(--green-100); color: var(--green-800); padding:9px 15px; border-radius:999px; font-size:14px; font-weight:600; box-shadow: var(--shadow-sm); }

/* ---------- PLANES (dos caminos) ---------- */
.plans { display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; align-items:stretch; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }
.plan {
  position: relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 40px); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -30px rgba(20,148,104,.42); }
.plan-featured {
  border:2px solid var(--green-500); box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--green-050), #ffffff 60%);
}
.plan-flag {
  position:absolute; top:-13px; left: clamp(28px,3.4vw,40px);
  background: var(--green-600); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
  box-shadow: 0 10px 20px -10px rgba(28,171,121,.9);
}
.plan-name { display:block; font-size:15px; font-weight:700; letter-spacing:.02em; color: var(--ink-soft); }
.plan-price { font-size: clamp(44px, 6vw, 60px); font-weight:800; letter-spacing:-.04em; color: var(--green-600); line-height:1; margin-top:10px; }
.plan-price small { font-size:16px; font-weight:600; color: var(--ink-soft); letter-spacing:-.01em; }
.plan-desc { color: var(--ink-soft); font-size:15.5px; line-height:1.55; margin-top:16px; }
.plan-list { list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; }
.plan-list li { display:flex; gap:11px; align-items:flex-start; font-size:15.5px; }
.plan-list svg { width:19px; height:19px; flex:none; color: var(--green-500); margin-top:3px; }
.plan .btn { margin-top:auto; width:100%; }

/* comparativa */
.compare { background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow:hidden; margin-top: clamp(32px,4vw,48px); }
.compare .scroll { overflow-x:auto; }
table.cmp { width:100%; border-collapse: collapse; min-width: 580px; }
table.cmp th, table.cmp td { padding:16px 24px; text-align:left; font-size:15.5px; border-top:1px solid var(--line); }
table.cmp thead th { border-top:none; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); background: var(--paper-alt); font-weight:700; }
table.cmp thead th.us { color: var(--green-700); }
table.cmp td.feat { color: var(--ink-soft); font-weight:500; }
table.cmp td.us { font-weight:700; background: var(--green-050); }
table.cmp td.them { color: var(--ink-soft); }
.yes { color: var(--green-600); font-weight:700; }
.no  { color:#cf6b52; font-weight:600; }

/* ---------- FINANCIAMIENTO ---------- */
.flow { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }
.flow-step { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding:28px 24px; box-shadow: var(--shadow); }
.flow-step .n { width:34px; height:34px; border-radius:50%; background: var(--green-600); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; margin-bottom:16px; }
.flow-step h3 { font-size:17.5px; margin-bottom:8px; }
.flow-step p { font-size:15px; color: var(--ink-soft); }

.fee-card {
  margin-top: clamp(28px, 4vw, 44px);
  background:#fff; border:2px solid var(--green-300); border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 48px); text-align:center; box-shadow: var(--shadow);
}
.fee-label { display:block; font-size:13px; color: var(--ink-soft); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.fee-figures { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: clamp(14px, 3vw, 36px); margin-top:20px; }
.fee-figures .fig b { display:block; font-size: clamp(44px, 6.6vw, 70px); font-weight:800; letter-spacing:-.05em; color: var(--green-600); line-height:1; }
.fee-figures .fig u { display:block; text-decoration:none; margin-top:9px; font-size:14px; font-weight:600; color: var(--ink-soft); }
.fee-sep { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
@media (max-width: 520px) { .fee-sep { width:100%; } }

.fee-card p { margin-top:22px; color: var(--ink-soft); font-size:17px; max-width: 62ch; margin-inline:auto; }

.fee-examples { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:26px; }
@media (max-width: 620px) { .fee-examples { grid-template-columns: 1fr; } }
.fee-examples .ex { background: var(--green-050); border:1px solid var(--green-100); border-radius: var(--r-sm); padding:16px 14px; }
.fee-examples .ex u { display:block; text-decoration:none; font-size:12.5px; font-weight:600; color: var(--ink-soft); }
.fee-examples .ex b { display:block; font-size:26px; font-weight:800; letter-spacing:-.035em; color: var(--green-700); margin-top:6px; line-height:1.1; }
.fee-examples .ex span { display:block; font-size:12px; color: var(--ink-faint); margin-top:2px; }
.fee-note { display:inline-flex; align-items:center; gap:9px; margin-top:24px; background: var(--green-050); border:1px solid var(--green-100); color: var(--green-800); font-weight:700; font-size:15px; padding:12px 20px; border-radius:999px; }

/* ---------- TUTOR ---------- */
.tutor-perks { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:28px; }
@media (max-width: 560px) { .tutor-perks { grid-template-columns: 1fr; } }
.perk { background:#fff; border:1px solid var(--line); border-radius: var(--r-sm); padding:18px; display:flex; gap:13px; align-items:flex-start; box-shadow: var(--shadow-sm); }
.perk .ic { width:40px; height:40px; border-radius:12px; background: var(--cyan-050); display:grid; place-items:center; font-size:19px; flex:none; }
.perk b { display:block; font-size:15.5px; margin-bottom:3px; }
.perk span { font-size:14px; color: var(--ink-soft); line-height:1.5; }

.stores { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.stores-group { margin-top:26px; }
.stores-label {
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color: var(--navy); opacity:.75;
}
.store {
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  background: var(--navy); color:#fff; border-radius:14px; padding:11px 19px;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: 0 12px 26px -16px rgba(27,58,92,.9);
}
.store:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(27,58,92,1); }
.store svg { width:25px; height:25px; flex:none; }
.store u { text-decoration:none; display:block; font-size:10px; opacity:.8; letter-spacing:.03em; }
.store b { display:block; font-size:15.5px; line-height:1.15; letter-spacing:-.02em; }
.store.soon { background:#94a3b8; box-shadow:none; cursor:default; opacity:.9; }
.store.soon:hover { transform:none; box-shadow:none; }

/* ---------- PASOS ---------- */
.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding:30px; box-shadow: var(--shadow); }
.step .n { font-size:46px; font-weight:800; letter-spacing:-.05em; color: var(--green-300); line-height:1; }
.step h3 { font-size:19px; margin:14px 0 8px; }
.step p { color: var(--ink-soft); font-size:15px; }

/* ---------- CTA FINAL ---------- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green-050), #ffffff 45%, var(--cyan-050));
  border: 2px solid var(--green-100);
  border-radius: var(--r-lg); padding: clamp(42px, 6vw, 78px);
  text-align:center; box-shadow: var(--shadow);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(29px, 4.4vw, 48px); text-wrap:balance; }
.cta p { color: var(--ink-soft); font-size:18px; max-width: 56ch; margin: 16px auto 32px; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta .mini { margin-top:24px; font-size:14px; color: var(--ink-faint); }

/* ---------- DUDAS / WHATSAPP ---------- */
.wa-box {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(30px, 4.5vw, 52px); box-shadow: var(--shadow);
  display:grid; grid-template-columns: 68px 1fr auto; gap:24px; align-items:center;
}
@media (max-width: 860px) { .wa-box { grid-template-columns: 1fr; text-align:center; justify-items:center; gap:18px; } }
.wa-icon { width:68px; height:68px; border-radius:20px; background: var(--wa); display:grid; place-items:center; color:#fff; box-shadow: 0 14px 28px -14px rgba(37,211,102,.9); }
.wa-icon svg { width:36px; height:36px; }
.wa-box h2 { font-size: clamp(22px, 2.8vw, 32px); text-wrap:balance; }
.wa-box p { color: var(--ink-soft); font-size:16.5px; margin-top:10px; }
.wa-box p b { color: var(--ink); }

/* ---------- FOOTER ---------- */
footer { border-top:1px solid var(--line); background: var(--paper-alt); padding: clamp(46px,6vw,66px) 0 30px; }
.foot-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap:30px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:15px; }
.foot-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.foot-grid a { text-decoration:none; color: var(--ink-soft); font-size:15px; }
.foot-grid a:hover { color: var(--green-700); }
.foot-about p { color: var(--ink-soft); font-size:15px; margin-top:16px; max-width: 34ch; }
.foot-bottom { border-top:1px solid var(--line); margin-top:40px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color: var(--ink-faint); }

/* sello ComparaSoftware */
.cs-badge {
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  margin-top:18px; padding:11px 16px 11px 12px;
  background:#fff; border:1px solid var(--green-100); border-radius:999px;
  box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cs-badge:hover { transform: translateY(-2px); border-color: var(--green-300); box-shadow: var(--shadow); }
.cs-check { width:26px; height:26px; flex:none; border-radius:50%; background: var(--green-600); color:#fff; display:grid; place-items:center; }
.cs-check svg { width:14px; height:14px; }
.cs-txt u { display:block; text-decoration:none; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-faint); }
.cs-txt b { display:block; font-size:14px; color: var(--ink); letter-spacing:-.01em; margin-top:1px; }

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow: 0 14px 32px -8px rgba(37,211,102,.75); text-decoration:none;
  transition: transform .16s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width:31px; height:31px; }

/* ---------- A11Y ---------- */
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; border-radius: 10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* =========================================================================
   AJUSTES MÓVIL — evitar textos/botones que se salen de línea
   ========================================================================= */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }

  /* Botones: en móvil el texto largo puede bajar de línea (antes: nowrap) y
     los CTA grandes ocupan todo el ancho para no desbordar la pantalla. */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { width: 100%; padding-inline: 18px; }
  .hero-cta, .cta-btns { width: 100%; }
  .hero-cta .btn, .cta-btns .btn { flex: 1 1 100%; }
  .wa-box .btn { width: 100%; }

  /* Eyebrow del hero: que el texto largo se centre y baje de línea prolijo. */
  .eyebrow { text-align: center; line-height: 1.4; }

  /* Titulares y números grandes: se ajustan al ancho real del teléfono. */
  .hero h1 { font-size: clamp(28px, 8.2vw, 42px); }
  .hero .sub { font-size: 16px; }
  .sec-head h2 { font-size: clamp(23px, 6.6vw, 34px); }
  .split-text h2, .hv-text h2, .free-hero h2 { font-size: clamp(22px, 6.2vw, 32px); }
  .plan-price { font-size: clamp(38px, 12vw, 54px); }
  .fee-figures .fig b { font-size: clamp(38px, 12vw, 60px); }
  .cta h2 { font-size: clamp(26px, 7.4vw, 40px); }

  /* Etiquetas/insignias centradas y con quiebre correcto. */
  .free-badges { justify-content: center; }
  .hero-mini { justify-content: center; }

  /* Links largos (monoespaciados) que no rompan el ancho. */
  .linkText, .link-text, code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- Bloque IA (acento morado) ---------- */
.tag-ia {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.split-ia {
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  border: 1px solid #ede9fe;
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 40px);
  margin-top: 44px;
}
.split-ia .split-list li svg { color: #7c3aed; }
.split-ia .tile:hover { border-color: #c4b5fd; box-shadow: 0 12px 30px -16px rgba(124,58,237,.35); }
.ia-note {
  margin-top: 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.55;
  background: #f5f3ff; border: 1px solid #ede9fe; border-radius: var(--r-sm);
  padding: 12px 14px;
}

/* ---------- Bloque Telemedicina (acento cian) ---------- */
.tag-tele {
  color: #0e7490;
  background: #ecfeff;
  border-color: #a5f3fc;
}
.split-tele {
  background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%);
  border: 1px solid #cffafe;
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 40px);
  margin-top: 44px;
}
.split-tele .split-list li svg { color: #0891b2; }
.split-tele .tile:hover { border-color: #67e8f9; box-shadow: 0 12px 30px -16px rgba(8,145,178,.35); }
.tele-note {
  background: #ecfeff; border-color: #cffafe;
}

/* =========================================================================
   REORDEN 2026 — pestañas de Funciones, comparación plegable, scrollspy
   y aparición suave al hacer scroll. No toca la paleta de :root.
   ========================================================================= */

/* ---------- PESTAÑAS (sección Funciones) ---------- */
.tab-nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom: clamp(30px, 4vw, 44px); }
.tab-btn {
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font);
  font-weight:700; font-size:14.5px; color: var(--ink-soft); background:#fff;
  border:1.5px solid var(--line); padding:11px 19px; border-radius:999px; cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}
.tab-btn:hover { border-color: var(--green-300); color: var(--green-700); transform: translateY(-1px); }
.tab-btn.is-active { background: var(--green-600); border-color: var(--green-600); color:#fff; box-shadow: 0 12px 26px -14px rgba(28,171,121,.75); }
.tab-btn-ia.is-active { background:#7c3aed; border-color:#7c3aed; box-shadow: 0 12px 26px -14px rgba(124,58,237,.6); }
.tab-btn-tele.is-active { background:#0891b2; border-color:#0891b2; box-shadow: 0 12px 26px -14px rgba(8,145,178,.6); }
.tab-ic { font-size:16px; line-height:1; }
@media (max-width: 700px) {
  .tab-nav { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .tab-btn { flex:none; }
}
/* dentro de las pestañas solo hay un panel visible a la vez: sin doble margen */
.tab-panels .split + .split { margin-top: 0; }
.tab-panel { animation: tabIn .3s ease; }
@keyframes tabIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- COMPARACIÓN PLEGABLE (sección Planes) ---------- */
.cmp-details { margin-top: clamp(30px, 4vw, 44px); text-align:center; }
.cmp-details summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:15px; color: var(--green-700);
  background: var(--green-050); border:1px solid var(--green-100);
  padding:12px 20px; border-radius:999px; transition: border-color .14s ease, transform .14s ease;
}
.cmp-details summary:hover { border-color: var(--green-300); transform: translateY(-1px); }
.cmp-details summary::-webkit-details-marker { display:none; }
.cmp-details summary::after { content:'↓'; font-weight:800; transition: transform .2s ease; }
.cmp-details[open] summary::after { transform: rotate(180deg); }
.cmp-details .compare { margin-top:20px; text-align:left; animation: tabIn .3s ease; }

/* ---------- Video + Pasos (cierre fusionado) ---------- */
.steps-head { margin-top: clamp(48px, 6vw, 76px); }

/* ---------- SCROLLSPY (nav activo según la sección visible) ---------- */
.nav-links a.link.is-active { color: var(--green-700); }

/* ---------- APARICIÓN SUAVE AL HACER SCROLL ----------
   Sin JS (o con "menos movimiento" activado) el <html> nunca recibe la
   clase .js-reveal, así que .reveal no tiene ninguna regla que le baje la
   opacidad: el contenido queda visible desde siempre. */
.js-reveal .reveal { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.is-visible { opacity:1; transform:none; }
.js-reveal .pillars .reveal:nth-child(2),
.js-reveal .steps .reveal:nth-child(2),
.js-reveal .flow .reveal:nth-child(2),
.js-reveal .tutor-perks .reveal:nth-child(2) { transition-delay:.08s; }
.js-reveal .pillars .reveal:nth-child(3),
.js-reveal .steps .reveal:nth-child(3),
.js-reveal .flow .reveal:nth-child(3),
.js-reveal .tutor-perks .reveal:nth-child(3) { transition-delay:.16s; }
.js-reveal .pillars .reveal:nth-child(4),
.js-reveal .tutor-perks .reveal:nth-child(4) { transition-delay:.24s; }
.js-reveal .tutor-perks .reveal:nth-child(5) { transition-delay:.32s; }
.js-reveal .tutor-perks .reveal:nth-child(6) { transition-delay:.4s; }
.js-reveal .plans .reveal:nth-child(2) { transition-delay:.1s; }

/* =========================================================================
   REORDEN 2026 — parte 2: identidad chilena, más movimiento, FAQ.
   Inspirado en la variedad visual de okvet.co, pero con diseños propios
   (cinta animada, sección oscura de cobertura con "mapa", acordeón de
   preguntas) — no se copia su estilo, solo la idea de sumar más secciones
   y más vida a la página. Paleta: se reutilizan los tokens ya definidos
   en :root (nada nuevo ahí); los pocos colores puntuales (rojo/negro de
   la bandera, franja oscura) son locales, igual que ya hacían .tag-ia/
   .tag-tele con sus acentos morado/cian.
   ========================================================================= */

/* ---------- Pilares: iconos con más carácter ---------- */
.pillar .ic {
  background: linear-gradient(135deg, var(--green-100), var(--cyan-050));
  border-color: var(--green-300);
  transition: transform .22s ease;
}
.pillar:hover .ic { transform: scale(1.08) rotate(-4deg); }

/* ---------- Badge "Hecho en Chile" en el hero ---------- */
.hero-mini .chip-cl {
  font-weight:700; color: var(--green-700);
  background: var(--green-050); border:1px solid var(--green-100);
  padding:7px 14px; border-radius:999px;
}

/* ---------- CINTA DE FUNCIONES (marquee continuo) ---------- */
.ticker {
  margin-top: clamp(26px, 3vw, 38px); overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display:flex; gap:14px; width:max-content; animation: ticker-scroll 30s linear infinite; }
.ticker-track span {
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color: var(--green-700);
  background:#fff; border:1px solid var(--green-100); padding:9px 17px;
  border-radius:999px; box-shadow: var(--shadow-sm);
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- COBERTURA NACIONAL (franja oscura + "mapa" de Chile) ---------- */
.band-cl {
  background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 52%, var(--cyan-600) 145%);
  color:#eafff5;
}
.cl-wrap { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 64px); align-items:center; }
@media (max-width: 900px) { .cl-wrap { grid-template-columns: 1fr; text-align:center; } }
.tag-cl { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color:#eafff5; }
.cl-text h2 { color:#fff; font-size: clamp(26px, 3.4vw, 40px); margin:16px 0 14px; text-wrap:balance; }
.cl-text p { color: rgba(234,255,245,.82); font-size:17px; }
@media (max-width: 900px) { .cl-text p { margin-inline:auto; max-width:52ch; } }

.cl-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: clamp(26px,3vw,34px); }
@media (max-width: 720px) { .cl-stats { grid-template-columns: repeat(2, 1fr); } }
.cl-stat {
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm); padding:16px 14px; backdrop-filter: blur(6px);
}
.cl-stat b {
  display:block; font-size: clamp(24px, 2.6vw, 32px); font-weight:800; letter-spacing:-.03em;
  color:#fff; font-variant-numeric: tabular-nums; line-height:1;
}
.cl-stat b.cl-stat-text { font-size: clamp(20px, 2.2vw, 26px); }
.cl-stat u { display:block; text-decoration:none; font-size:12px; color: rgba(234,255,245,.75); margin-top:6px; line-height:1.35; }

.cl-map { position:relative; display:flex; align-items:center; justify-content:center; gap: clamp(14px,2vw,22px); }
.cl-map-svg { width: clamp(96px, 12vw, 150px); height:auto; flex:none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.cl-route { fill:none; stroke: rgba(255,255,255,.32); stroke-width:3; stroke-linecap:round; }
.cl-pins circle { fill:#fff; stroke: var(--green-500); stroke-width:2.6; transform-box: fill-box; transform-origin:center; animation: cl-pulse 2.6s ease-in-out infinite; }
.cl-pins .cl-pin-main { fill: var(--green-300); stroke:#fff; }
.cl-pins circle:nth-child(2) { animation-delay:.2s; }
.cl-pins circle:nth-child(3) { animation-delay:.4s; }
.cl-pins circle:nth-child(4) { animation-delay:.6s; }
.cl-pins circle:nth-child(5) { animation-delay:.8s; }
.cl-pins circle:nth-child(6) { animation-delay:1s; }
.cl-pins circle:nth-child(7) { animation-delay:1.2s; }
.cl-pins circle:nth-child(8) { animation-delay:1.4s; }
.cl-pins circle:nth-child(9) { animation-delay:1.6s; }
@keyframes cl-pulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(1.35); } }

.cl-cities { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between; font-size:13px; font-weight:700; color: rgba(234,255,245,.85); align-self:stretch; padding-block:4px; }
.cl-city-main { color:#fff; font-size:14.5px; }
@media (max-width: 700px) {
  .cl-map { flex-direction:column; }
  .cl-cities { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px 14px; }
}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq-list { max-width: 780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm); overflow:hidden;
}
.faq-item summary {
  cursor:pointer; list-style:none; position:relative;
  padding:18px 52px 18px 22px; font-weight:700; font-size:15.5px; color: var(--ink);
  transition: color .14s ease;
}
.faq-item summary:hover { color: var(--green-700); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:23px; font-weight:400; color: var(--green-600); line-height:1;
}
.faq-item[open] summary::after { content:'–'; }
.faq-a { padding:0 22px 20px; animation: tabIn .25s ease; }
.faq-a p { color: var(--ink-soft); font-size:15px; line-height:1.65; }