:root{
  --navy:#0A3D62;
  --navy-2:#0F2740;
  --hueso:#F5F7FA;
  --acento:#F79F1F;
  --texto:#0d1b2a;
}

/* ============== HERO ============== */
.servicios--pro .s-hero{
  position:relative; overflow:hidden; color:#fff;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 68px 0 54px;
}
.servicios--pro .s-hero .container{ position:relative; z-index:2 }
.servicios--pro .s-hero h1{ margin:0 0 8px; font-size: clamp(32px, 4vw, 44px) }
.servicios--pro .s-hero p{ opacity:.92; margin:0 0 18px }
.s-hero__bg .deco{ position:absolute; opacity:.2; animation: floaty 18s ease-in-out infinite alternate }
.s-hero__bg .d1{ left:4%; top:10%; width:160px }
.s-hero__bg .d2{ right:8%; top:18%; width:140px; animation-duration:22s }
.s-hero__bg .d3{ right:12%; bottom:10%; width:180px; animation-duration:20s }
@keyframes floaty{0%{transform:translateY(-8px) rotate(-1deg)}100%{transform:translateY(8px) rotate(1deg)}}

.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-2px) }
.btn--whatsapp{ background:#25D366; color:#fff }
.btn--primary{ background:var(--navy); color:#fff }
.btn--ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6) }
.btn--ghost:hover{ background:rgba(255,255,255,.08) }

/* ============== CARDS ============== */
.s-cards{ background: #0b3555 linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); padding:40px 0 56px; color:#fff }
.s-cards .cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
.card{
  position:relative; overflow:hidden; border-radius:16px; padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px) rotateX(1deg) rotateY(-1deg);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 26px 60px rgba(0,0,0,.32);
}
.card__ribbon{
  position:absolute; top:14px; right:-38px; transform:rotate(35deg);
  background: var(--acento); color:#0b1726; font-weight:900; padding:6px 40px; letter-spacing:.5px; box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.card__head{ text-align:center; padding-top:10px }
.card .icon-wrap{ font-size:36px; margin-bottom:8px }
.card h3{ margin:.25rem 0 .35rem }
.card .price{ color: #ffe2b4 }
.card__features{ margin:12px 0 14px; padding-left:18px; }
.card__features li{ margin:6px 0; opacity:.96 }
.card__cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.card__cta .btn--ghost{ border-color: rgba(255,255,255,.35) }

/* ============== VALUE ============== */
.s-value{ background:linear-gradient(180deg, #0F2740, #0A3D62); color:#fff; padding:26px 0 }
.v-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.v-grid li{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px }
.v-grid li span{ font-size:20px; display:inline-block; margin-right:6px }
.v-grid li b{ display:block }

/* ============== COMPARATIVA ============== */
.s-compare{ background:#F5F7FA; color:#0d1b2a; padding:46px 0 }
.s-compare h2{ text-align:center; margin:0 0 14px }
.table-wrap{ overflow:auto; border-radius:12px; box-shadow: 0 12px 28px rgba(0,0,0,.08) }
.cmp-table{ width:100%; border-collapse:collapse; min-width:720px; background:#fff }
.cmp-table th, .cmp-table td{ padding:14px; border-bottom:1px solid #eef2f7 }
.cmp-table thead th{ background:#0A3D62; color:#fff; position:sticky; top:0 }

/* ============== FAQ ============== */
.s-faq{ background: linear-gradient(180deg, #f7fafc, #eef2f7); color:#0d1b2a; padding:46px 0 }
.c-faq h2{ text-align:center; margin:0 0 14px }
.faq-list{ max-width:900px; margin: 0 auto }
.faq-item{ background:#fff; border:1px solid #e7eef6; border-radius:12px; margin-bottom:10px; overflow:hidden; box-shadow:0 10px 20px rgba(3,27,78,.06) }
.faq-q{ width:100%; text-align:left; padding:16px 18px; background:#fff; border:0; font-weight:800; cursor:pointer; position:relative }
.faq-q::after{ content:"+"; position:absolute; right:14px; top:12px; font-weight:900; transition: transform .2s ease }
.faq-item.active .faq-q::after{ transform:rotate(45deg) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 18px }
.faq-item.active .faq-a{ max-height:240px; padding:0 18px 16px }

/* ============== CTA FINAL ============== */
.s-cta{ background: radial-gradient(1000px 520px at 65% -10%, rgba(0,0,0,.06), transparent 55%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; text-align:center; padding:50px 0 }
.s-cta p{ opacity:.9; margin:.25rem auto 1rem }

/* ============== REVEAL + UTILS ============== */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: .5s ease }
.revealed{ opacity:1; transform:none }

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px){
  .s-cards .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 640px){
  .s-cards .cards{ grid-template-columns: 1fr; }
  .v-grid{ grid-template-columns:1fr }
  .card__ribbon{ right:-46px }
}


/* --- Comparativa interactiva --- */
.s-compare{ background:#F5F7FA; color:#0d1b2a; padding:46px 0 }
.s-compare h2{ text-align:center; margin:0 0 14px }

.table-wrap{ position:relative; overflow:hidden; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.08) }
.cmp-table{ width:100%; border-collapse:collapse; min-width:720px; background:#fff }
.cmp-table th, .cmp-table td{ padding:14px; border-bottom:1px solid #eef2f7 }
.cmp-table thead th{ background:#0A3D62; color:#fff; position:sticky; top:0; z-index:1 }

/* filas extra ocultas por defecto */
.s-compare.is-collapsed .cmp-extra .is-extra{ display:none; }

/* máscara degradada cuando está colapsado */
.cmp-mask{
  position:absolute; left:0; right:0; bottom:56px; height:56px;
  background: linear-gradient(to bottom, rgba(245,247,250,0) 0%, #F5F7FA 100%);
  opacity:1; pointer-events:none; transition: opacity .25s ease;
}
.s-compare:not(.is-collapsed) .cmp-mask{ opacity:0 }

/* botón */
.cmp-actions{ display:flex; justify-content:center; align-items:center; gap:10px; padding:12px; background:#F5F7FA }
.cmp-toggle{ background:transparent; color:#0A3D62; border:2px solid #0A3D62; border-radius:12px; padding:10px 16px; font-weight:800; cursor:pointer; transition:.2s ease }
.cmp-toggle:hover{ background:#0A3D62; color:#fff; transform: translateY(-1px) }

/* responsive */
@media (max-width: 860px){
  .cmp-table{ min-width:600px }
}
@media (max-width: 640px){
  .cmp-table{ min-width:520px }
  .cmp-toggle{ width:100% }
}

.card .price {
  font-size: 1.6rem;                /* Mucho más grande */
  font-weight: 800;               /* Súper bold */
  margin: 12px 0;
  text-shadow: 0 3px 8px rgba(0,0,0,0.4);  /* Brillo para resaltar */
  display: inline-block;
  padding: 2px 25px;
  border-radius: 8px;
  border: 2px solid #333;
  /*background: linear-gradient(135deg, #fff 0%, #F79F1F 100%);*/
  color: #333;
  background: #fdfdfd;
  animation: pulsePrice 2.5s infinite;     /* Animación ligera */
}

/* Animación de pulso */
@keyframes pulsePrice {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


/* HERO */
.n-hero{
  position:relative;
  background: radial-gradient(1200px 700px at 70% -10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:72px 0 56px;
  overflow:hidden;
}
.n-hero .badge{
  display:inline-block; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 10px; border-radius:999px; font-weight:700; margin-bottom:10px
}
.n-hero h1{ font-size:clamp(28px,5vw,48px); margin:0 0 10px; line-height:1.1 }
.n-hero h1 .muted{ opacity:.75; font-weight:400; font-size:.8em }
.n-hero p{ opacity:.95; max-width:56ch }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center }
.hero-cta{ display:flex; gap:12px; margin:16px 0 10px }
.hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; padding:0; list-style:none }
.hero-badges li{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:999px }

/* foto */
.hero-photo{
  margin:0; text-align:center; position:relative; filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));
}
.hero-photo img{
  width:320px; height:320px; object-fit:cover; border-radius:50%;
  border:4px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 8px rgba(247,159,31,.12), inset 0 0 60px rgba(255,255,255,.06);
  transition:transform .25s ease;
}
.hero-photo figcaption{ margin-top:10px; opacity:.85 }

/* chips flotantes */
.c-hero__fx{ position:absolute; inset:0; pointer-events:none }
.c-hero__fx .chip{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) scale(var(--sz,1));
  padding:8px 12px; border-radius:999px;
  font-weight:800; font-size:12px; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  animation:floatY var(--d,16s) ease-in-out infinite alternate;
  transition: left var(--t,13s) linear, top var(--t,13s) linear, transform .15s ease;
  opacity:.3; backdrop-filter: blur(2px);
}
@keyframes floatY{ 0%{transform:translate(-50%,-50%) translateY(-8px) scale(var(--sz,1))}
  100%{transform:translate(-50%,-50%) translateY(10px) scale(var(--sz,1))} }

.v-grid{
    list-style: none;
}