/* Páginas de servicios: servicios.html, publicidad-en-redes-sociales.html y community-manager.html.
   Usa los tokens de la web (--ink, --orange, --negro, --stone, --line, --radius-*, --shadow-*). */

.icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-badge{
  width:46px; height:46px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); color:var(--ink); margin-bottom:18px; flex-shrink:0;
}
.icon-badge.orange{ background:var(--orange); color:var(--negro); }

section.svc{ padding:88px 0; }
@media (max-width:640px){ section.svc{ padding:60px 0; } }

.svc-head{ max-width:720px; margin:0 0 40px; }
.svc-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.svc-head h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-0.025em; line-height:1.2;
  font-size:clamp(28px, 3.6vw, 42px); margin:16px 0 0; color:var(--negro); text-wrap:balance;
}
.svc-head h2 em{
  font-style:normal; background:var(--orange); color:var(--negro); padding:0 .14em; border-radius:.2em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.svc-head p{ font-size:16px; line-height:1.6; color:var(--stone); margin:14px 0 0; }
.svc-head.center p{ margin-left:auto; margin-right:auto; max-width:62ch; }

/* --- Qué incluye --- */
.svc-includes{ background:var(--paper-dim); }
.svc-points{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:960px){ .svc-points{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-points{ grid-template-columns:1fr; } }
.svc-point{ background:#fff; border-radius:var(--radius-md); padding:24px 22px; box-shadow:var(--shadow-card); }
.svc-point h3{ font-family:var(--f-display); font-weight:700; font-size:17px; line-height:1.3; margin:0 0 6px; color:var(--negro); }
.svc-point p{ font-size:14px; line-height:1.55; color:var(--stone); margin:0; }
.svc-note{ margin:22px 0 0; font-size:13.5px; line-height:1.6; color:var(--stone); max-width:80ch; }

/* --- Vitrina de piezas (igual a la del inicio) --- */
.showcase{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.showcase .wrap{ position:relative; z-index:1; }
.showcase-blob{ position:absolute; pointer-events:none; }
.showcase-blob.s1{ width:360px; height:330px; top:-170px; left:-130px; background:var(--azul-soporte); border-radius:var(--blob-a); opacity:0.5; }
.showcase-blob.s2{ width:240px; height:220px; bottom:-120px; right:-80px; background:var(--orange); border-radius:var(--blob-b); }
.showcase .svc-head h2{ color:#fff; }
.showcase .svc-head h2 em{ background:none; color:var(--orange); padding:0; }
.showcase .svc-head p{ color:#dfe5fb; }
.showcase .eyebrow{ background:var(--orange); color:var(--negro); }
.showcase-grid{ display:grid; grid-template-columns:0.703fr 1fr 1fr; gap:22px; align-items:start; max-width:1040px; margin:0 auto; }
.showcase-grid.even{ grid-template-columns:repeat(3, 1fr); }
.showcase-item{ margin:0; }
.showcase-media{ display:block; width:100%; padding:0; border:0; background:#14213f; border-radius:20px; overflow:hidden; position:relative; box-shadow:0 30px 60px -30px rgba(0,0,0,0.6); }
.showcase-media video, .showcase-media img{ display:block; width:100%; height:auto; }
.showcase-item--video .showcase-media video{ aspect-ratio:9/16; object-fit:contain; background:#000; }
/* En pantalla completa el video se muestra entero, sin recortar */
.showcase-media video:fullscreen{ aspect-ratio:auto; object-fit:contain; }
.showcase-media video:-webkit-full-screen{ aspect-ratio:auto; object-fit:contain; }
.showcase-zoom{ cursor:zoom-in; transition:transform .2s ease, box-shadow .2s ease; }
.showcase-zoom:hover{ transform:translateY(-4px); box-shadow:0 36px 70px -30px rgba(0,0,0,0.7); }
.showcase-hint{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:rgba(32,30,29,0.72); display:flex; align-items:center; justify-content:center; }
.showcase-hint svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.showcase-item figcaption{ margin-top:12px; font-family:var(--f-display); font-size:14px; font-weight:500; color:#dfe5fb; text-align:center; }
.showcase-item figcaption span{ display:inline-block; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; background:rgba(255,255,255,0.14); color:#fff; padding:3px 9px; border-radius:999px; margin-right:6px; }
.showcase-cta{ margin-top:44px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 18px; }
.showcase-cta p{ flex-basis:100%; margin:0; text-align:center; font-size:14.5px; color:#dfe5fb; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:600; font-size:14.5px;
  color:#fff; text-decoration:none; border:1.5px solid rgba(255,255,255,0.5); padding:13px 22px; border-radius:999px;
  transition:border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.1); }
@media (max-width:760px){
  .showcase-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .showcase-item--video{ grid-column:1 / -1; max-width:320px; width:100%; margin:0 auto; }
  .showcase-grid.even{ grid-template-columns:1fr 1fr; }
  .showcase-grid.even .showcase-item--video{ grid-column:auto; max-width:none; }
  .showcase-media{ border-radius:16px; }
  .showcase-blob.s2{ width:130px; height:120px; bottom:-80px; right:-60px; }
}
@media (max-width:420px){ .showcase-item figcaption{ font-size:12.5px; } .showcase-item figcaption span{ display:block; width:max-content; margin:0 auto 4px; } }

.tech-zoom{ border:none; padding:0; background:transparent; max-width:96vw; max-height:94vh; overflow:visible; }
.tech-zoom::backdrop{ background:rgba(16,18,28,0.88); }
.tech-zoom img{ display:block; max-width:96vw; max-height:90vh; width:auto; height:auto; border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,0.5); }
.tech-zoom-close{
  position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.1); color:#fff; font-size:22px; line-height:1; cursor:pointer;
}

/* --- Franja que lleva a los paquetes --- */
.svc-band{ background:var(--orange); position:relative; overflow:hidden; }
.svc-band::after{ content:""; position:absolute; width:220px; height:200px; right:-70px; bottom:-120px; background:#ffcd4d; border-radius:var(--blob-a); }
.svc-band .wrap{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding-top:44px; padding-bottom:44px; }
.svc-band h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-0.02em; font-size:clamp(22px, 2.6vw, 30px); line-height:1.2; margin:0 0 6px; color:var(--negro); }
.svc-band p{ margin:0; color:var(--negro); font-size:15px; line-height:1.55; max-width:62ch; }
.svc-band .btn-primary{ background:var(--ink); color:#fff; }
.svc-band .btn-primary:hover{ background:var(--ink-2, #233d86); }
.svc-band .btn-primary .icon{ stroke:#fff; }

/* --- Paquetes (mismo diseño que en el inicio) --- */
.pricing{ position:relative; background:var(--orange); overflow:hidden; }
.pricing::before{ content:""; position:absolute; width:560px; height:520px; right:-220px; top:-220px; background:#ffcd4d; border-radius:var(--blob-a); }
.pricing::after{ content:""; position:absolute; width:260px; height:240px; left:-110px; top:38%; background:var(--ink); border-radius:var(--blob-b); opacity:0.9; }
.pricing > .wrap{ position:relative; z-index:1; }
.pkg-group{ scroll-margin-top:96px; }
.pkg-group + .pkg-group{ margin-top:80px; }
.pkg-group-head{ text-align:center; max-width:680px; margin:0 auto 28px; }
.pkg-group-head .eyebrow{ background:var(--ink); color:#fff; }
.pkg-group-head h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-0.02em; font-size:clamp(26px, 3.2vw, 38px); line-height:1.15; color:var(--negro); margin:14px 0 8px; }
.pkg-group-head p{ font-size:15px; line-height:1.55; color:var(--negro); opacity:0.85; margin:0; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:960px){ .pricing-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan{
  position:relative; background:rgba(255,255,255,0.42);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1.5px solid rgba(255,255,255,0.55); border-radius:var(--radius-lg); padding:26px 22px 24px;
  display:flex; flex-direction:column; height:100%; text-decoration:none; cursor:pointer; container-type:inline-size;
  box-shadow:0 12px 34px -16px rgba(32,30,29,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.plan:hover{
  transform:translateY(-6px); border-color:var(--ink); background:rgba(255,255,255,0.58);
  box-shadow:0 0 0 5px rgba(44,74,158,0.18), 0 16px 38px -14px rgba(32,30,29,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
}
.plan.featured{ background:rgba(255,255,255,0.42); border-color:rgba(255,255,255,0.55); }
.plan.featured:hover{ background:rgba(255,255,255,0.58); border-color:var(--ink); }
.plan-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.plan-badge{ background:var(--ink); color:#fff; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:0.04em; padding:4px 10px; border-radius:999px; }
.plan .icon-badge{ margin-bottom:16px; }
.plan .icon-badge.orange{ background:var(--orange); color:var(--negro); box-shadow:0 6px 14px -6px rgba(32,30,29,0.3); }
.plan-top-row .icon-badge{ margin-bottom:0; }
.plan .role{ font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
.plan h3{ font-family:var(--f-display); font-weight:800; color:var(--negro); letter-spacing:-0.025em; font-size:clamp(22px, 12.5cqi, 40px); line-height:1.05; margin:0 0 10px; white-space:nowrap; }
.pkg-group.org .plan h3{ font-size:clamp(20px, 10cqi, 34px); line-height:1.15; }
.plan .desc{ font-size:13.5px; line-height:1.55; color:var(--ink-deep); opacity:0.85; margin:0 0 16px; }
.plan-list{ margin:0 0 20px; padding-left:18px; font-size:13px; line-height:1.65; color:var(--ink-deep); flex-grow:1; }
.plan-list li{ margin-bottom:4px; }
.plan-list li.plan-gift{ margin-top:14px; font-weight:600; color:var(--ink); }
.plan-gift-note{ margin:-12px 0 20px; font-size:11.5px; color:var(--ink-deep); opacity:0.65; }
.plan .meta{ border-top:1.5px solid rgba(32,30,29,0.18); padding-top:16px; display:flex; flex-direction:column; gap:6px; }
.plan .dur{ font-family:var(--f-display); font-size:12px; color:var(--ink-deep); opacity:0.7; }
.plan .price{ font-family:var(--f-display); display:flex; align-items:baseline; gap:3px; color:var(--ink-deep); }
.plan .price .price-currency{ font-size:13px; font-weight:600; opacity:0.7; }
.plan .price .price-amount{ font-size:34px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
.plan .price .price-period{ font-size:13px; font-weight:600; opacity:0.7; }
.plan .price .price-igv{ font-size:10.5px; font-weight:600; opacity:0.55; margin-left:1px; }
.price-igv-total{ font-family:var(--f-body); font-size:11.5px; color:#5A5E66; margin:-6px 0 14px; }
.plan-cta{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; background:var(--ink); color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:13px; padding:11px 16px; border-radius:999px;
  transition:background .2s ease, gap .2s ease;
}
.plan:hover .plan-cta{ background:var(--ink-deep); gap:11px; }
.plan-cta .icon{ stroke:#fff; }
.price-note{ font-size:13px; line-height:1.6; color:var(--ink-deep); opacity:0.85; text-align:center; margin:26px auto 0; max-width:90ch; }
.price-note strong{ color:var(--ink-deep); }
.price-note a{ color:var(--ink-deep); text-decoration:underline; }

/* --- Servicios adicionales (diseño propio, sin precios) --- */
.svc-extras{ background:var(--negro); color:#fff; position:relative; overflow:hidden; }
.svc-extras::before{ content:""; position:absolute; width:420px; height:380px; right:-170px; top:-170px; background:var(--ink); border-radius:var(--blob-a); opacity:0.85; }
.svc-extras .wrap{ position:relative; z-index:1; }
.svc-extras .svc-head h2{ color:#fff; }
.svc-extras .svc-head h2 em{ background:none; color:var(--orange); padding:0; }
.svc-extras .svc-head p{ color:#c9ccd3; }
.svc-extras .eyebrow{ background:var(--orange); color:var(--negro); }
.extras-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.extra{ display:flex; gap:14px; align-items:flex-start; padding:18px 18px 16px; border-radius:18px; background:var(--negro-2, #2a2826); border:1px solid rgba(255,255,255,0.08); }
.extra-ico{ flex:none; width:40px; height:40px; border-radius:12px; background:rgba(254,181,1,0.14); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.extra-ico svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.extra h3{ font-family:var(--f-display); font-weight:700; font-size:15px; line-height:1.3; margin:0 0 3px; color:#fff; }
.extra p{ font-size:13px; line-height:1.45; color:#b8bcc6; margin:0; }
.extras-cta{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.extras-cta p{ color:#c9ccd3; font-size:14.5px; line-height:1.55; margin:0; max-width:60ch; }

/* --- Enlaces a cada servicio --- */
.svc-more{ background:var(--paper-dim); }
.svc-links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.svc-link{
  display:flex; gap:16px; align-items:center; padding:22px; border-radius:var(--radius-md); background:#fff;
  text-decoration:none; color:var(--negro); box-shadow:var(--shadow-card); border:1.5px solid transparent;
  transition:transform .2s ease, border-color .2s ease;
}
.svc-link:hover{ transform:translateY(-3px); border-color:var(--ink); }
.svc-link .icon-badge{ margin:0; }
.svc-link h3{ font-family:var(--f-display); font-weight:700; font-size:17px; margin:0 0 4px; }
.svc-link p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--stone); }
.svc-link .arrow{ margin-left:auto; flex:none; width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* --- Preguntas frecuentes --- */
.faq{ background:#fff; }
.faq-list{ max-width:860px; margin:0 auto; display:grid; gap:8px; }
.faq-item{ background:var(--gris-nube, #EEF1F5); border-radius:18px; border:1.5px solid transparent; transition:border-color .2s ease, background .2s ease; }
.faq-item[open]{ background:#fff; border-color:var(--ink); box-shadow:var(--shadow-card); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px; font-family:var(--f-display); font-weight:700; font-size:15.5px; line-height:1.35; color:var(--negro);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:none; width:28px; height:28px; border-radius:50%; transition:transform .25s ease;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201E1D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a{ padding:0 20px 18px; }
.faq-a p{ margin:0; font-size:15px; line-height:1.65; color:var(--stone); max-width:72ch; }
.faq-a a{ color:var(--ink); font-weight:600; }
@media (max-width:640px){ .faq-item summary{ font-size:15px; padding:15px 16px; } .faq-a{ padding:0 16px 16px; } }

/* --- Adelanto de servicios de tecnología (servicios.html) --- */
.tech-teaser{ background:#fff; }
.tt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.tt-card{
  position:relative; display:grid; gap:4px; align-content:start; padding:26px 24px; border-radius:var(--radius-md);
  background:var(--paper-dim); text-decoration:none; color:var(--negro); border:1.5px solid transparent;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tt-card:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:var(--shadow-card); }
.tt-card .icon-badge{ margin-bottom:10px; }
.tt-card h3{ font-family:var(--f-display); font-weight:800; font-size:20px; margin:0 0 4px; }
.tt-card p{ margin:0; font-size:14px; line-height:1.55; color:var(--stone); }
.tt-tag{ position:absolute; top:18px; right:18px; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.tt-tag.soon{ background:#E6ECFB; color:var(--ink); }
.tt-cta{ margin-top:28px; display:flex; justify-content:center; }
@media (max-width:860px){ .tt-grid{ grid-template-columns:1fr; } }