/* ==========================================================================
   ArctikSEO — Páginas de servicio (primera: Posicionamiento web)
   Reutiliza tokens y módulos de la portada; aquí solo lo propio de servicio.
   ========================================================================== */

/* Etiqueta pequeña en mono (misma voz que migas y casos) */
.sv-kicker{
  display:inline-block;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ice-1);
}
.sv-kicker--ai{ color:#c084fc; }

/* ---------- Cabecera: texto a la izquierda, resultados de Google a la derecha ---------- */
.sv-hero{ padding:150px 0 90px; }
.sv-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; position:relative; z-index:2; }
.sv-hero-text{ min-width:0; }
.sv-hero .page-title{ max-width:14ch; }

/* Maqueta de resultados (ejemplo ilustrativo) */
.serp{
  --row:66px;
  position:relative; margin:0; min-width:0;
  padding:22px 22px 20px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(34,211,238,.04);
}
.serp-note{
  position:absolute; top:-11px; right:18px; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--bg); border:1px solid var(--border);
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim-2);
}
.serp-bar{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:var(--radius-pill);
  background:var(--bg); border:1px solid var(--border); color:var(--text-dim); font-size:14px;
}
.serp-query{ color:var(--text); }
.serp-list{ list-style:none; margin:16px 0 0; padding:0; position:relative; height:calc(var(--row) * 5); }
.serp-row{
  position:absolute; left:0; right:0; top:0; height:calc(var(--row) - 6px);
  display:flex; gap:12px; align-items:center; padding:0 12px; border-radius:10px;
  transform:translateY(calc(var(--slot) * var(--row)));
  transition:transform .7s cubic-bezier(.65,0,.25,1), background .4s ease, border-color .4s ease;
  border:1px solid transparent; opacity:.55;
}
.serp-fav{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.08); }
.serp-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.serp-dom{ font-size:11px; color:var(--text-dim-2); }
.serp-title{ font-size:14px; color:#8ab4f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-line{ height:5px; width:70%; border-radius:3px; background:rgba(255,255,255,.07); }
.serp-row--you{ padding-right:118px; opacity:1; z-index:2; background:rgba(34,211,238,.07); border-color:rgba(34,211,238,.35); }
.serp-row--you .serp-fav{ background:var(--ice-grad); }
.serp-row--you .serp-dom{ color:var(--ice-3); }
.serp-row--you .serp-title{ color:var(--text); font-weight:600; }

.serp-rank{
  position:absolute; right:-16px; top:98px; z-index:3;
  padding:6px 12px; border-radius:var(--radius-pill); background:var(--ice-grad); color:#04121c;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 10px 24px -8px rgba(56,189,248,.7);
  transform:translateY(calc(var(--rank-slot, 0) * var(--row)));
  transition:transform .7s cubic-bezier(.65,0,.25,1);
}
.serp-rank b{ font-family:var(--ff-head); font-size:14px; letter-spacing:0; margin-left:2px; font-variant-numeric:tabular-nums; }

.serp-ai{
  margin-top:10px; padding:14px 16px; border-radius:var(--radius-sm);
  border:1px solid rgba(192,132,252,.3);
  background:linear-gradient(160deg, rgba(139,92,246,.10), transparent 70%), var(--bg-alt);
  transition:opacity .6s ease, transform .6s ease;
}
.serp-ai-label{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#d8b4fe; }
.serp-ai p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--text-dim); }
.serp-ai p b{ color:var(--text); font-weight:600; }
.serp-cite{
  display:inline-block; margin-top:10px; padding:3px 9px; border-radius:var(--radius-pill);
  border:1px solid rgba(192,132,252,.35); font-family:var(--ff-mono); font-size:11px; color:#d8b4fe;
}
/* Estado inicial de la animación (lo pone el script; sin script se ve el resultado final) */
.serp.is-start .serp-ai{ opacity:0; transform:translateY(10px); }

.sv-hero-actions{ margin-top:32px; }
.sv-proof{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft);
  display:flex; flex-wrap:wrap; gap:10px 0;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);
  max-width:820px;
}
.sv-proof li + li::before{ content:"·"; margin:0 16px; color:var(--text-dim-2); }
.sv-proof b{ font-family:var(--ff-head); font-size:18px; letter-spacing:0; color:var(--text); margin-right:6px; font-variant-numeric:tabular-nums; }

/* ---------- Dónde te posicionamos ---------- */
.sv-where{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid var(--border); }
.sv-where-item{ display:flex; flex-direction:column; gap:12px; padding:34px 32px 0 0; min-width:0; }
.sv-where-item + .sv-where-item{ padding-left:32px; border-left:1px solid var(--border-soft); }
.sv-where-item h3{ font-size:22px; font-weight:600; }
.sv-where-item p{ color:var(--text-dim); font-size:15.5px; line-height:1.65; }

/* Mini maqueta de cada resultado: es contenido, no adorno — enseña dónde sale el cliente */
.sv-mock{
  margin-top:auto; display:flex; flex-direction:column; gap:8px; width:100%; max-width:380px; min-height:104px; justify-content:center;
  padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--panel); font-size:13px; line-height:1.35;
}
.sv-mock-url{ font-size:11.5px; color:var(--text-dim-2); }
.sv-mock-title{ color:#8ab4f8; font-weight:500; }
.sv-mock-stars{ color:#fbbc04; font-size:12px; letter-spacing:.05em; }
.sv-mock-stars em{ font-style:normal; color:var(--text-dim); letter-spacing:0; margin-left:4px; }
.sv-mock-line{ height:6px; border-radius:3px; background:rgba(255,255,255,.08); }
.sv-mock-line.short{ width:62%; }
.sv-mock--ai{ border-color:rgba(192,132,252,.28); background:linear-gradient(160deg, rgba(139,92,246,.08), transparent 70%), var(--panel); }
.sv-mock-q{ color:var(--text); }
.sv-mock-cite{
  align-self:flex-start; font-family:var(--ff-mono); font-size:11px; color:#d8b4fe;
  padding:3px 8px; border-radius:var(--radius-pill); border:1px solid rgba(192,132,252,.35);
}

/* Puente hacia la página de GEO (en WordPress queda oculto hasta que exista la página) */
.sv-geo-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px; align-self:flex-start;
  font-family:var(--ff-head); font-weight:600; font-size:14px; color:#d8b4fe;
  border-bottom:1px solid rgba(192,132,252,.4); padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease, gap .2s ease;
}
.sv-geo-link:hover{ color:#f0e3ff; border-color:#d8b4fe; gap:11px; }
.sv-geo-link:focus-visible{ outline:2px solid #c084fc; outline-offset:4px; border-radius:2px; }
.split-change .lead + .lead{ margin-top:14px; }
.sv-intro .split-block.split-change{ align-items:start; }
.sv-intro .split-label{ padding-top:6px; }

/* ---------- Qué incluye: filas a todo el ancho (no tarjetas, para no repetir la portada) ---------- */
.sv-points{ display:grid; gap:9px; }
.sv-points li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:#c4d1dd; }
.sv-points li::before{
  content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px;
  border-right:1.5px solid var(--ice-1); border-bottom:1.5px solid var(--ice-1); transform:rotate(-45deg);
}
.sv-areas{ border-top:1px solid var(--border); }
.sv-area{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr); gap:24px 56px;
  padding:36px 0; border-bottom:1px solid var(--border);
}
.sv-area::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--ice-grad); transition:width .6s ease;
}
.sv-area:hover::after{ width:100%; }
.sv-area-name{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.sv-area-name h3{ font-family:var(--ff-head); font-size:22px; font-weight:600; line-height:1.25; text-wrap:balance; }
.sv-area-desc{ min-width:0; }
.sv-area-desc > p:first-child{ color:var(--text-dim); font-size:16px; line-height:1.65; }
.sv-deliver{
  margin-top:16px; padding-left:14px; border-left:2px solid var(--ice-1);
  font-size:15px; line-height:1.55; color:var(--text);
}
.sv-deliver span{
  display:block; margin-bottom:4px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1);
}
.sv-area .sv-points{ align-content:start; padding-top:2px; }

/* Puente a GEO al final de la lista */
.sv-geo-band{
  margin-top:40px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px 24px; align-items:center;
  padding:24px 28px; border-radius:var(--radius-md);
  border:1px solid rgba(192,132,252,.3);
  background:linear-gradient(100deg, rgba(139,92,246,.12), rgba(139,92,246,.03) 60%, transparent), var(--panel);
}
.sv-geo-icon{ color:#c084fc; }
.sv-geo-band p{ color:var(--text-dim); font-size:15.5px; line-height:1.6; }
.sv-geo-band strong{ color:var(--text); font-weight:600; }
.sv-geo-band .sv-geo-link{ margin-top:0; white-space:nowrap; }

/* ---------- Qué puedes esperar y cuándo: etapas con barra de progreso ---------- */
.sv-expect{
  background:
    radial-gradient(ellipse 60% 120% at 88% 0%, rgba(34,211,238,.07), transparent 70%),
    var(--panel);
  border-top:1px solid rgba(34,211,238,.16);
  border-bottom:1px solid rgba(34,211,238,.16);
}
.sv-progress{
  position:relative; height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden;
}
.sv-progress-fill{
  position:absolute; inset:0; transform-origin:left center;
  background:linear-gradient(90deg, var(--ice-1), #38bdf8 55%, var(--ice-2));
  transition:transform 2.4s cubic-bezier(.45,0,.2,1);
}
.sv-progress.is-start .sv-progress-fill{ transform:scaleX(0); transition:none; }

.sv-phases{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
.sv-phase{ position:relative; padding-top:30px; display:flex; flex-direction:column; min-width:0; }
.sv-phase::before{
  content:""; position:absolute; left:0; top:-8px; width:12px; height:12px; border-radius:50%;
  background:var(--panel); border:2px solid var(--ice-1);
}
.sv-when{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:var(--ice-1); }
.sv-phase h3{ margin-top:8px; font-family:var(--ff-serif); font-size:26px; font-weight:600; letter-spacing:-.01em; }
.sv-phase-do, .sv-phase-see{ margin-top:18px; }
.sv-phase-do span, .sv-phase-see span{
  display:block; margin-bottom:6px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim-2);
}
.sv-phase-do p{ font-size:15px; line-height:1.6; color:var(--text-dim); }
.sv-phase-see{
  margin-top:auto; padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.22);
}
.sv-phase-do{ margin-bottom:18px; }
.sv-phase-see span{ color:var(--ice-1); }
.sv-phase-see p{ font-size:15.5px; line-height:1.5; color:var(--text); font-weight:500; }
.sv-note{ margin-top:26px; font-size:13.5px; color:var(--text-dim-2); }

.sv-monthly{
  margin-top:44px; padding-top:28px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 40px;
}
.sv-monthly-label{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }
.sv-monthly ul{ display:flex; flex-wrap:wrap; gap:12px 32px; }
.sv-monthly li{ display:flex; align-items:center; gap:9px; font-size:15px; color:var(--text); }
.sv-monthly svg{ flex:none; color:var(--ice-1); }

.sv-cases-cta{
  margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.sv-cases-cta p{ font-family:var(--ff-serif); font-size:clamp(22px,2.4vw,28px); font-weight:600; line-height:1.25; color:var(--text); text-wrap:balance; }
.sv-cases-cta .btn svg{ transition:transform .25s ease; }
.sv-cases-cta .btn:hover svg{ transform:translateX(3px); }

/* ---------- Preguntas frecuentes ---------- */
.sv-faq-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:64px; align-items:start; }
.sv-faq-head{ position:sticky; top:120px; }
.sv-faq-head .h2{ display:block; text-wrap:balance; }
.sv-faq{ border-top:1px solid var(--border); }
.sv-faq details{ border-bottom:1px solid var(--border); }
.sv-faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 0; font-family:var(--ff-head); font-weight:600; font-size:19px; line-height:1.35; color:var(--text);
  transition:color .2s ease;
}
.sv-faq summary::-webkit-details-marker{ display:none; }
.sv-faq summary::after{
  content:"+"; flex:none; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:50%; font-family:var(--ff-mono); font-size:16px; font-weight:400; color:var(--ice-1);
  transition:transform .25s ease, border-color .2s ease;
}
.sv-faq details[open] summary::after{ transform:rotate(45deg); border-color:rgba(34,211,238,.45); }
.sv-faq summary:hover{ color:var(--ice-1); }
.sv-faq summary:focus-visible{ outline:2px solid var(--ice-1); outline-offset:4px; border-radius:4px; }
.sv-faq details p{ padding:0 54px 26px 0; color:var(--text-dim); font-size:16px; line-height:1.7; max-width:720px; }

/* ---------- Cierre propio de la página ---------- */
.sv-cta .sv-kicker{ margin-bottom:18px; }
.sv-cta .cta-btn{ margin-top:34px; }
.sv-cta-note{ margin-top:18px; font-size:14px; color:var(--text-dim); }
.sv-cta .cta-title{ text-wrap:balance; }
.sv-cta-trust{
  margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 0;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
.sv-cta-trust li + li::before{ content:"·"; margin:0 12px; color:var(--ice-1); }
.sv-cta-note a{
  color:var(--text); font-weight:600; font-variant-numeric:tabular-nums;
  text-decoration:underline; text-decoration-color:rgba(34,211,238,.45); text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.sv-cta-note a:hover{ color:var(--ice-1); text-decoration-color:var(--ice-1); }
.sv-cta-note a:focus-visible{ outline:2px solid var(--ice-1); outline-offset:3px; border-radius:2px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .sv-faq-grid{ grid-template-columns:1fr; gap:40px; }
  .sv-faq-head{ position:static; }
  .sv-cta-trust{ flex-direction:column; align-items:center; gap:6px; }
  .sv-cta-trust li + li::before{ display:none; }
  .sv-area{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sv-area-name{ grid-column:1 / -1; }
  .sv-geo-band{ grid-template-columns:auto minmax(0,1fr); }
  .sv-geo-band .sv-geo-link{ grid-column:2; justify-self:start; }
  .sv-hero-grid{ grid-template-columns:1fr; gap:56px; }
  .serp{ max-width:560px; }
  .sv-where{ grid-template-columns:1fr; border-top:0; }
  .sv-where-item, .sv-where-item + .sv-where-item{ padding:28px 0; border-left:0; border-top:1px solid var(--border); }
  .sv-mock{ max-width:420px; }
  .sv-progress{ display:none; }
  .sv-phases{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; }
  .sv-phase{ border-top:2px solid rgba(34,211,238,.35); }
  .sv-phase::before{ top:-7px; }
}
@media (max-width: 640px){
  .sv-area{ grid-template-columns:1fr; gap:18px; padding:30px 0; }
  .sv-area-name h3{ font-size:20px; }
  .sv-geo-band{ grid-template-columns:1fr; padding:22px 20px; }
  .sv-geo-band .sv-geo-link{ grid-column:auto; white-space:normal; }
  .sv-hero{ padding:120px 0 64px; }
  .serp{ --row:62px; padding:18px 14px 16px; }
  .serp-rank{ right:10px; top:-12px; transform:none; }
  .serp-note{ right:auto; left:14px; }
  .serp-row--you{ padding-right:12px; }
  .sv-phases{ grid-template-columns:1fr; row-gap:36px; }
  .sv-monthly{ flex-direction:column; align-items:flex-start; }
  .sv-monthly ul{ flex-direction:column; }
  .sv-faq summary{ font-size:17px; padding:20px 0; }
  .sv-faq details p{ padding-right:0; }
  .sv-hero-actions .btn-lg, .sv-cases-cta .btn-lg{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  .sv-proof{ font-size:11px; letter-spacing:.03em; }
  .sv-proof b{ font-size:16px; margin-right:4px; }
  .sv-proof li + li::before{ margin:0 8px; }
  .sv-cta-trust li{ text-wrap:balance; }
}
/* ============ CASOS (servicio) ============ */
.sv-case{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px;
  padding:44px; border:1px solid rgba(34,211,238,.22); border-radius:var(--radius-lg);
  background:radial-gradient(ellipse 70% 90% at 0% 0%, rgba(34,211,238,.07), transparent 60%), var(--panel);
}
.sv-case-head{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.sv-case-head h3{ font-family:var(--ff-serif); font-size:clamp(30px,3.4vw,40px); font-weight:600; line-height:1.1; }
.sv-case-metric{ color:var(--text); font-size:17px; line-height:1.45; font-weight:500; max-width:300px; }
.sv-case-metric span{
  display:block; margin-bottom:6px;
  font-family:var(--ff-head); font-size:clamp(56px,6vw,76px); font-weight:700; line-height:1;
  letter-spacing:-.03em; color:var(--ice-1); font-variant-numeric:tabular-nums;
}
.sv-case-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px;
  color:var(--ice-1); font-weight:600; font-size:15px; text-decoration:none;
}
.sv-case-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.sv-case-link svg{ transition:transform .2s ease; }
.sv-case-link:hover svg{ transform:translateX(3px); }
.sv-case-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.sv-case-steps > li{ padding:20px 0 20px 22px; border-left:1px solid var(--border); position:relative; }
.sv-case-steps > li::before{
  content:""; position:absolute; left:-5px; top:25px; width:9px; height:9px; border-radius:50%;
  background:var(--panel); border:1.5px solid var(--ice-1);
}
.sv-case-steps > li:first-child{ padding-top:0; }
.sv-case-steps > li:first-child::before{ top:5px; }
.sv-case-steps > li:last-child{ padding-bottom:0; }
.sv-case-steps p{ margin-top:8px; color:var(--text-dim); font-size:16px; line-height:1.65; }
.sv-case-result::before{ background:var(--ice-1) !important; }
.sv-case-result p{ color:var(--text); }
.sv-case-areas{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sv-case-areas li{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ice-3);
  padding:4px 10px; border:1px solid rgba(34,211,238,.25); border-radius:var(--radius-pill); background:rgba(34,211,238,.06);
}
.sv-cases-more{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:24px; }
@media (max-width: 980px){
  .sv-case{ grid-template-columns:1fr; gap:32px; padding:32px; }
  .sv-case-metric{ max-width:none; }
}
@media (max-width: 640px){
  .sv-case{ padding:26px 20px; border-radius:var(--radius-md); }
  .sv-cases-more{ grid-template-columns:1fr; }
}

@media (max-width: 400px){
  .sv-cta .cta-btn{ padding:18px 22px; }
  .sv-cta .cta-btn svg{ display:none; }  /* sin flecha cabe "Quiero mi auditoría gratis" en una línea */
}
@media (prefers-reduced-motion: reduce){
  .sv-progress-fill, .sv-area::after, .sv-faq summary::after, .serp-row, .serp-rank, .serp-ai{ transition:none; }
}

/* ==========================================================================
   GEO: conversación con la IA (cabecera) y piezas propias
   ========================================================================== */
.ai-chat{
  position:relative; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:16px;
  padding:20px 20px 18px; border:1px solid rgba(192,132,252,.28); border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(139,92,246,.10), transparent 55%), var(--panel);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(192,132,252,.05);
}
.ai-chat-top{
  display:flex; align-items:center; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--border-soft);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#d8b4fe;
}
.ai-chat-top svg{ color:#c084fc; }
.ai-thread{ display:flex; flex-direction:column; gap:18px; }
.ai-msg{ margin:0; }
.ai-msg--user{
  align-self:flex-end; max-width:86%; padding:11px 15px; border-radius:16px 16px 4px 16px;
  background:rgba(255,255,255,.07); color:var(--text); font-size:14.5px; line-height:1.45;
  transition:opacity .4s ease, transform .4s ease;
}
.ai-msg--bot{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:start; }
.ai-avatar{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, #a78bfa, #6366f1); color:#fff;
}
.ai-bubble{ position:relative; min-width:0; }
.ai-text{ font-size:15px; line-height:1.65; color:#c4d1dd; }
.ai-text b{ color:var(--text); font-weight:600; background:rgba(192,132,252,.18); padding:1px 3px; border-radius:5px; }
.ai-text .w{ transition:opacity .25s ease; }
.ai-sources{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px;
  transition:opacity .5s ease, transform .5s ease;
}
.ai-sources > span:first-child{
  margin-right:2px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim-2);
}
.ai-src{ padding:3px 9px; border-radius:var(--radius-pill); border:1px solid var(--border); font-family:var(--ff-mono); font-size:11px; color:var(--text-dim); }
.ai-src--you{ color:#f0e3ff; border-color:rgba(192,132,252,.6); background:rgba(192,132,252,.15); }
.ai-typing{ position:absolute; left:0; top:6px; display:flex; gap:5px; opacity:0; transition:opacity .2s ease; }
.ai-typing i{ width:7px; height:7px; border-radius:50%; background:#c084fc; animation:aiDot 1s ease-in-out infinite; }
.ai-typing i:nth-child(2){ animation-delay:.15s; }
.ai-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes aiDot{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
.ai-input{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 9px 9px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg);
  font-size:13.5px; color:var(--text-dim-2);
}
.ai-send{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(192,132,252,.2); color:#d8b4fe; }

/* Estados de la animación (los pone el script; sin script se ve la conversación completa) */
.ai-chat.is-start .ai-msg--user{ opacity:0; transform:translateY(8px); }
.ai-chat.is-start.q-on .ai-msg--user{ opacity:1; transform:none; }
.ai-chat.is-start .ai-text .w{ opacity:0; }
.ai-chat.is-start .ai-text .w.on{ opacity:1; }
.ai-chat.is-start .ai-text b:has(.w:not(.on)){ background-color:transparent; }
.ai-chat.is-start .ai-sources{ opacity:0; transform:translateY(6px); }
.ai-chat.is-typing .ai-typing{ opacity:1; }

/* Cabecera de GEO: el título es más largo que el de SEO */
.sv-hero--geo .page-title{ max-width:none; font-size:clamp(32px, 3.6vw, 46px); text-wrap:pretty; }

/* Qué es: rótulo sobre las tres columnas y piezas de las maquetas */
.sv-where-label{
  margin-bottom:0; padding-bottom:18px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
}
.sv-mock-quote{ padding-left:10px; border-left:2px solid #c084fc; color:var(--text); font-size:13.5px; line-height:1.45; }

/* Enlaces y franja que llevan de GEO al posicionamiento web (en azul, color de SEO) */
.sv-geo-link--seo{ color:var(--ice-3); border-bottom-color:rgba(34,211,238,.4); }
.sv-geo-link--seo:hover{ color:#fff; border-color:var(--ice-1); }
.sv-geo-link--seo:focus-visible{ outline-color:var(--ice-1); }
.sv-geo-band--seo{
  border-color:rgba(34,211,238,.28);
  background:linear-gradient(100deg, rgba(34,211,238,.10), rgba(34,211,238,.02) 60%, transparent), var(--panel);
}
.sv-geo-band--seo .sv-geo-icon{ color:var(--ice-1); }

@media (max-width: 640px){
  .ai-chat{ padding:18px 14px 14px; }
  .ai-msg--user{ font-size:14px; }
  .ai-text{ font-size:14.5px; }
}
@media (prefers-reduced-motion: reduce){
  .ai-typing i{ animation:none; }
  .ai-msg--user, .ai-sources, .ai-text .w{ transition:none; }
}

/* ---------- GEO: así es tu auditoría (tabla de ejemplo) ---------- */
.sv-audit{
  margin:0; padding:24px 24px 20px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--panel);
}
.sv-audit-cap{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:18px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.sv-audit-cap .serp-note{ position:static; }
.sv-audit-table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; }
.sv-audit-table thead th{
  padding:0 12px 12px; text-align:center; border-bottom:1px solid var(--border);
  font-family:var(--ff-mono); font-size:11.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.sv-audit-table thead th:first-child{ text-align:left; padding-left:0; }
.sv-audit-table tbody th{ padding:16px 16px 16px 0; text-align:left; font-weight:500; color:var(--text); }
.sv-audit-table td{ padding:16px 12px; text-align:center; width:15%; }
.sv-audit-table tbody tr + tr > *{ border-top:1px solid var(--border-soft); }

/* Marca de cada celda: círculo con icono (sin texto en escritorio; el texto queda para lectores de pantalla) */
.sv-mark{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; vertical-align:middle;
  border:1.5px solid currentColor; background:color-mix(in srgb, currentColor 12%, transparent);
}
.sv-mark::before{ content:""; width:12px; height:12px; background:currentColor; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
.is-yes{ color:var(--ice-1); --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12.5 5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-no{ color:#f87171; --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.is-warn{ color:#fbbf24; --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v9' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19.5' r='2' fill='%23000'/%3E%3C/svg%3E"); }
.sv-mark-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sv-audit-legend{
  display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text-dim);
}
.sv-audit-legend li{ display:flex; align-items:center; gap:8px; }
.sv-audit-legend li{ color:var(--text-dim); }
.sv-audit-legend .sv-mark{ width:20px; height:20px; }
.sv-audit-legend .sv-mark::before{ width:9px; height:9px; }
.sv-audit-legend .is-yes .sv-mark{ color:var(--ice-1); }
.sv-audit-legend .is-no .sv-mark{ color:#f87171; }
.sv-audit-legend .is-warn .sv-mark{ color:#fbbf24; }

/* Resumen bajo la tabla */
.sv-audit-sum{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:28px; }
.sv-audit-sum li{ padding:22px 24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.sv-audit-num{
  display:block; font-family:var(--ff-head); font-size:40px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color:var(--ice-1); font-variant-numeric:tabular-nums;
}
.sv-audit-num small{ font-size:16px; font-weight:500; letter-spacing:0; color:var(--text-dim); }
.sv-audit-sum p{ margin-top:10px; font-size:15px; line-height:1.5; color:var(--text-dim); }
.sv-audit-next{ margin-top:28px; font-size:17px; line-height:1.6; color:var(--text); }

/* Móvil: cada pregunta pasa a ser una tarjeta con los tres asistentes debajo */
@media (max-width: 640px){
  .sv-audit{ padding:18px 16px; border-radius:var(--radius-md); }
  .sv-audit-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .sv-audit-table, .sv-audit-table tbody, .sv-audit-table tr{ display:block; }
  .sv-audit-table tr{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; padding:16px 0; }
  .sv-audit-table tbody tr + tr > *{ border-top:0; }
  .sv-audit-table tbody tr + tr{ border-top:1px solid var(--border-soft); }
  .sv-audit-table tbody th{ grid-column:1 / -1; padding:0 0 4px; font-size:15px; }
  .sv-audit-table td{
    width:auto; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:6px;
    border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  }
  .sv-audit-table td::before{
    content:attr(data-ia); font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
  }
  .sv-mark{ width:24px; height:24px; }
  .sv-audit-sum{ grid-template-columns:1fr; gap:12px; }
  .sv-audit-num{ font-size:34px; }
}
@media (min-width: 641px) and (max-width: 980px){
  .sv-audit-sum{ grid-template-columns:1fr; }
}

/* ---------- GEO: franja con resultados SEO de clientes (tras la auditoría) ---------- */
.sv-proofband{
  margin-top:48px; padding-top:28px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 40px; align-items:center;
}
.sv-proofband-label{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); grid-column:1 / -1; line-height:1.5; }
.sv-proofband ul{ display:flex; flex-wrap:wrap; gap:16px 40px; }
.sv-proofband li{ display:flex; align-items:center; gap:12px; }
.sv-proofband-num{ font-family:var(--ff-head); font-size:30px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ice-1); font-variant-numeric:tabular-nums; }
.sv-proofband li > span:last-child{ display:flex; flex-direction:column; font-size:13.5px; line-height:1.35; color:var(--text-dim); }
.sv-proofband li b{ font-family:var(--ff-mono); font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim-2); margin-top:2px; }
.sv-proofband .sv-geo-link{ margin-top:0; white-space:nowrap; }
@media (max-width: 980px){
  .sv-proofband{ grid-template-columns:1fr; }
  .sv-proofband .sv-geo-link{ justify-self:start; }
}
@media (max-width: 640px){
  .sv-proofband ul{ flex-direction:column; gap:14px; }
  .sv-proofband li{ display:grid; grid-template-columns:104px minmax(0,1fr); }
}

/* ---------- GEO: 'Qué incluye' como ciclo mensual ---------- */
.sv-cycle{
  display:grid; grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr); grid-template-rows:auto 76px auto;
}
.sv-cycle-card{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  padding:30px 30px 28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel);
}
.sv-cycle-card h3{ font-family:var(--ff-head); font-size:22px; font-weight:600; line-height:1.25; }
.sv-cycle-card > p:not(.sv-deliver){ color:var(--text-dim); font-size:15.5px; line-height:1.65; }
.sv-cycle-card .sv-deliver{ margin-top:4px; }
.sv-cycle-card .sv-points{ margin-top:6px; padding-top:16px; border-top:1px solid var(--border-soft); }
.sv-cycle .c1{ grid-area:1 / 1; } .sv-cycle .c2{ grid-area:1 / 3; }
.sv-cycle .c3{ grid-area:3 / 3; } .sv-cycle .c4{ grid-area:3 / 1; }
.sv-cycle-arrow{ display:grid; place-items:center; color:var(--ice-1); }
.sv-cycle .a1{ grid-area:1 / 2; }
.sv-cycle .a2{ grid-area:2 / 3; } .sv-cycle .a2 svg{ transform:rotate(90deg); }
.sv-cycle .a3{ grid-area:3 / 2; } .sv-cycle .a3 svg{ transform:rotate(180deg); }
.sv-cycle .a4{ grid-area:2 / 1; } .sv-cycle .a4 svg{ transform:rotate(-90deg); }
.sv-cycle{ position:relative; }
.sv-cycle-card{ position:relative; z-index:1; }
.sv-cycle-arrow{ position:relative; z-index:1; }
.sv-cycle-arrow svg{ width:22px; height:22px; padding:6px; box-sizing:content-box; border-radius:50%; background:var(--bg-alt); }
.sv-cycle .a4 em{
  position:absolute; left:calc(50% + 24px); top:50%; transform:translateY(-50%); white-space:nowrap;
  font-style:normal; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ice-1);
}
.sv-cycle-more{ display:none; }
/* Circuito que une las cuatro tarjetas (pasa por debajo de ellas) y punto de luz que lo recorre */
.sv-cycle-loop{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.sv-cycle-loop path{ fill:none; }
.sv-cycle-track{ stroke:color-mix(in srgb, var(--ice-1) 30%, transparent); stroke-width:1.5; }
.sv-cycle-beam{
  stroke:var(--ice-1); stroke-width:3; stroke-linecap:round; stroke-dasharray:4 96;
  filter:drop-shadow(0 0 4px var(--ice-1)); animation:svLoop 9s linear infinite;
}
@keyframes svLoop{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } }
@media (max-width: 980px){
  .sv-cycle{ display:flex; flex-direction:column; align-items:stretch; }
  .sv-cycle-arrow{ height:44px; }
  .sv-cycle .a1 svg, .sv-cycle .a2 svg, .sv-cycle .a3 svg{ transform:rotate(90deg); }
  .sv-cycle-loop{ display:none; }
  .sv-cycle .a4{ display:flex; align-items:center; height:auto; margin-top:14px; flex-direction:row; gap:10px; align-self:center; }
  .sv-cycle .a4 svg{ transform:rotate(-90deg); width:20px; height:20px; }
  .sv-cycle .a4 em{ position:static; }
  .sv-cycle-more{ display:inline; }
}
@media (max-width: 640px){
  .sv-cycle-card{ padding:24px 20px; border-radius:var(--radius-md); }
  .sv-cycle-card h3{ font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .sv-cycle-beam{ animation:none; display:none; }
}

/* ---------- GEO: color propio de la página (morado = IA) ----------
   Solo dentro del contenido de la página de GEO: la cabecera, el pie y los botones siguen en el azul de la marca. */
.sv-page:has(.sv-hero--geo){
  --ice-1:#c084fc; --ice-2:#8b5cf6; --ice-3:#e9d5ff;
  --ice-grad:linear-gradient(135deg, #e9d5ff 0%, #a78bfa 50%, #7c3aed 100%);
}
/* Lo que lleva a SEO o habla de Google (botones, enlaces y franjas azules) conserva el azul */
.sv-page:has(.sv-hero--geo) .btn, .sv-page:has(.sv-hero--geo) .sv-geo-link--seo, .sv-page:has(.sv-hero--geo) .sv-geo-band--seo, .sv-page:has(.sv-hero--geo) .sv-proofband{
  --ice-1:#22d3ee; --ice-2:#3b82f6; --ice-3:#a8e9ff;
  --ice-grad:linear-gradient(135deg, #7fe7ff 0%, #2f8fef 100%);
}
.sv-page:has(.sv-hero--geo) .page-hero{
  background:
    radial-gradient(ellipse 55% 110% at 88% -10%, rgba(192,132,252,.11), transparent 62%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(139,92,246,.07), transparent 70%),
    var(--bg);
}
.sv-page:has(.sv-hero--geo) .page-hero-glow{ background:radial-gradient(circle, rgba(192,132,252,.14), transparent 65%); }
.sv-page:has(.sv-hero--geo) .sv-expect{
  background:radial-gradient(ellipse 60% 120% at 88% 0%, rgba(192,132,252,.08), transparent 70%), var(--panel);
  border-top-color:rgba(192,132,252,.18); border-bottom-color:rgba(192,132,252,.18);
}
.sv-page:has(.sv-hero--geo) .sv-progress-fill{ background:linear-gradient(90deg, #e9d5ff, #a78bfa 55%, #7c3aed); }
.sv-page:has(.sv-hero--geo) .sv-phase-see{ background:rgba(192,132,252,.08); border-color:rgba(192,132,252,.26); }
.sv-page:has(.sv-hero--geo) .sv-faq details[open] summary::after{ border-color:rgba(192,132,252,.5); }
.sv-page:has(.sv-hero--geo) .sv-cta-note a{ text-decoration-color:rgba(192,132,252,.5); }
.sv-page:has(.sv-hero--geo) .cta-box{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(192,132,252,.11), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--bg-alt));
}
@media (max-width: 980px){
  .sv-page:has(.sv-hero--geo) .sv-phase{ border-top-color:rgba(192,132,252,.4); }
}

/* ---------- Títulos de las páginas de servicio: serifa, sin mayúsculas (se distinguen de la portada) ---------- */
.sv-page .h2{
  font-family:var(--ff-serif); font-weight:600; text-transform:none;
  font-size:clamp(30px, 4vw, 46px); line-height:1.12; letter-spacing:-.015em;
}
.sv-page .cta-title{ font-family:var(--ff-serif); font-weight:600; letter-spacing:-.015em; }

/* ==========================================================================
   PR DIGITAL: titulares de medios (cabecera) y piezas propias
   ========================================================================== */
.sv-hero--pr .page-title{ max-width:none; font-size:clamp(34px, 4vw, 52px); text-wrap:balance; }

/* Maqueta de la cabecera: menciones en medios que van apareciendo */
.pr-feed{
  position:relative; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:14px;
  padding:20px 20px 18px; border:1px solid rgba(251,191,36,.26); border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(251,191,36,.08), transparent 55%), var(--panel);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(251,191,36,.05);
}
.pr-feed-top{
  display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--border-soft);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fcd34d;
}
.pr-live{ width:7px; height:7px; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.15); }
.pr-count{ margin-left:auto; color:var(--text-dim-2); letter-spacing:.06em; }
.pr-count b{ color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.pr-items{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.pr-item{
  display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);
  transition:opacity .5s ease, transform .5s ease;
}
.pr-outlet{
  display:flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.pr-outlet i{
  flex:none; width:18px; height:18px; border-radius:4px; display:grid; place-items:center;
  font-family:var(--ff-serif); font-style:normal; font-size:11px; font-weight:700; letter-spacing:0;
  background:rgba(255,255,255,.08); color:var(--text);
}
.pr-headline{ font-family:var(--ff-serif); font-size:16.5px; font-weight:600; line-height:1.32; color:var(--text); text-wrap:pretty; }
.pr-headline b{ font-weight:700; background:rgba(251,191,36,.18); padding:0 3px; border-radius:4px; }
.pr-tag{
  align-self:flex-start; padding:3px 9px; border-radius:var(--radius-pill);
  font-family:var(--ff-mono); font-size:10.5px; color:#fde68a; border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.1);
}
.pr-tag--link{ color:#a8e9ff; border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.1); }
.pr-ai{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; align-items:start;
  padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid rgba(192,132,252,.3); background:linear-gradient(160deg, rgba(139,92,246,.12), transparent 70%);
  transition:opacity .5s ease, transform .5s ease;
}
.pr-ai-icon{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #a78bfa, #6366f1); color:#fff; }
.pr-ai p{ font-size:14px; line-height:1.5; color:#c4d1dd; }
.pr-ai p span{ display:block; margin-bottom:2px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#d8b4fe; }
.pr-ai b{ color:var(--text); font-weight:600; }

/* Estados de la animación (los pone el script; sin script se ve todo) */
.pr-feed.is-start .pr-item, .pr-feed.is-start .pr-ai{ opacity:0; transform:translateY(10px); }
.pr-feed.is-start .pr-item.on, .pr-feed.is-start .pr-ai.on{ opacity:1; transform:none; }

/* Qué es: comparativa SEO / IA */
.pr-compare{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.pr-side{
  display:flex; flex-direction:column; gap:14px; min-width:0;
  padding:30px 30px 28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel);
  border-top:2px solid var(--side, var(--border));
}
.pr-side--seo{ --side:#22d3ee; }
.pr-side--ai{ --side:#c084fc; }
.pr-side--seo .sv-kicker{ color:#22d3ee; }
.pr-side h3{ font-family:var(--ff-head); font-size:22px; font-weight:600; line-height:1.25; }
.pr-side dl{ display:grid; gap:0; margin:4px 0 6px; }
.pr-side dl > div{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px solid var(--border-soft); }
.pr-side dt{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); padding-top:3px; }
.pr-side dd{ margin:0; font-size:15px; line-height:1.55; color:#c4d1dd; }
.pr-side .sv-geo-link{ margin-top:auto; }

/* Qué incluye: formatos */
.pr-formats{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.pr-formats-label{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.pr-formats ul{ display:flex; flex-wrap:wrap; gap:8px; }
.pr-formats li{ padding:6px 13px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--panel); font-size:14px; color:var(--text); }
.pr-formats + .sv-geo-band{ margin-top:32px; }

/* Resultados dentro de 'Qué puedes esperar' */
.sv-expect .sv-proofband{ margin-top:56px; }

@media (max-width: 980px){
  .pr-compare{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .pr-feed{ padding:18px 14px 14px; }
  .pr-item{ padding:12px 13px; }
  .pr-headline{ font-size:15.5px; }
  .pr-side{ padding:24px 20px; border-radius:var(--radius-md); }
  .pr-side dl > div{ grid-template-columns:1fr; gap:4px; }
  .pr-formats{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .pr-item, .pr-ai{ transition:none; }
}

/* ---------- PR digital: color propio de la página (ámbar = prensa y titulares) ----------
   Solo dentro del contenido: cabecera, pie y botones siguen en el azul de la marca. */
.sv-page:has(.sv-hero--pr){
  --ice-1:#fbbf24; --ice-2:#f59e0b; --ice-3:#fde68a;
  --ice-grad:linear-gradient(135deg, #fef3c7 0%, #fbbf24 50%, #f97316 100%);
}
.sv-page:has(.sv-hero--pr) .btn, .sv-page:has(.sv-hero--pr) .sv-geo-link--seo, .sv-page:has(.sv-hero--pr) .sv-proofband{
  --ice-1:#22d3ee; --ice-2:#3b82f6; --ice-3:#a8e9ff;
  --ice-grad:linear-gradient(135deg, #7fe7ff 0%, #2f8fef 100%);
}
.sv-page:has(.sv-hero--pr) .page-hero{
  background:
    radial-gradient(ellipse 55% 110% at 88% -10%, rgba(251,191,36,.09), transparent 62%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(249,115,22,.06), transparent 70%),
    var(--bg);
}
.sv-page:has(.sv-hero--pr) .page-hero-glow{ background:radial-gradient(circle, rgba(251,191,36,.11), transparent 65%); }
.sv-page:has(.sv-hero--pr) .sv-expect{
  background:radial-gradient(ellipse 60% 120% at 88% 0%, rgba(251,191,36,.06), transparent 70%), var(--panel);
  border-top-color:rgba(251,191,36,.16); border-bottom-color:rgba(251,191,36,.16);
}
.sv-page:has(.sv-hero--pr) .sv-progress-fill{ background:linear-gradient(90deg, #fef3c7, #fbbf24 55%, #f97316); }
.sv-page:has(.sv-hero--pr) .sv-phase-see{ background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.24); }
.sv-page:has(.sv-hero--pr) .sv-faq details[open] summary::after{ border-color:rgba(251,191,36,.5); }
.sv-page:has(.sv-hero--pr) .sv-cta-note a{ text-decoration-color:rgba(251,191,36,.5); }
.sv-page:has(.sv-hero--pr) .cta-box{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(251,191,36,.09), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--bg-alt));
}
@media (max-width: 980px){
  .sv-page:has(.sv-hero--pr) .sv-phase{ border-top-color:rgba(251,191,36,.4); }
}

/* ==========================================================================
   CONTENT MARKETING: portadas de contenidos (cabecera), recorrido del cliente, formatos (todo visible),
   camino de una pieza, informe mensual y enlaces a los otros servicios
   ========================================================================== */
.sv-hero--cm .page-title{ max-width:none; font-size:clamp(34px, 4vw, 52px); text-wrap:balance; }

/* ---------- Portadas de contenidos (cabecera en abanico) ---------- */
.cm-cv{
  display:flex; flex-direction:column; gap:10px; width:100%; padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:14px; background:var(--panel);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.85);
}
.cm-cv-k{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#6ee7b7; }
.cm-cv-t{ font-family:var(--ff-serif); font-size:19px; font-weight:600; line-height:1.2; color:var(--text); text-wrap:balance; }
.cm-cv-m{ margin-top:auto; font-family:var(--ff-mono); font-size:10.5px; color:var(--text-dim-2); }
.cm-cv--guia{ min-height:230px; background:linear-gradient(165deg, rgba(52,211,153,.22), rgba(52,211,153,.04) 45%, transparent 70%), var(--panel); border-color:rgba(52,211,153,.3); }
.cm-cv--guia .cm-cv-t{ font-size:22px; }
.cm-cv-img{ display:block; height:84px; margin:-8px -8px 4px; border-radius:9px; background:
  radial-gradient(circle at 75% 30%, rgba(167,243,208,.45), transparent 35%),
  linear-gradient(135deg, #065f46, #10b981 60%, #6ee7b7); opacity:.8; }
.cm-cv-bars{ display:flex; align-items:flex-end; gap:6px; height:70px; padding:6px 0; }
.cm-cv-bars i{ flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg, #6ee7b7, #059669); }
.cm-cv-n{ font-family:var(--ff-serif); font-size:52px; font-weight:600; line-height:1; color:#6ee7b7; }
.cm-cv-n small{ font-size:16px; color:var(--text-dim); font-family:var(--ff-body, Inter), sans-serif; font-weight:400; }
.cm-cv-list{ display:grid; gap:7px; margin:2px 0 0; padding:0; list-style:none; font-size:13px; color:var(--text-dim); }
.cm-cv-list li{ display:flex; align-items:center; gap:8px; }
.cm-cv-list svg{ flex:none; width:15px; height:15px; padding:2px; border-radius:50%; color:#04140d; background:#34d399; }
.cm-cv-bar{ display:flex; gap:5px; margin:-4px 0 4px; }
.cm-cv-bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
.cm-cv-lines{ display:grid; gap:6px; }
.cm-cv-lines i{ height:6px; border-radius:3px; background:rgba(255,255,255,.08); }
.cm-cv-lines i.s{ width:60%; }
.cm-cv-btn{ align-self:flex-start; margin-top:4px; padding:6px 12px; border-radius:var(--radius-pill); background:#34d399; color:#04140d; font-family:var(--ff-head); font-size:11.5px; font-weight:700; }

/* ---------- Cabecera: abanico de portadas a la derecha ---------- */
.cm-hero-b .page-title{ max-width:none; font-size:clamp(34px, 4vw, 52px); text-wrap:balance; }
.cm-fan{ position:relative; height:440px; margin-left:24px; }
.cm-fan-item{
  position:absolute; left:50%; top:50%; width:210px;
  transform:translate(-50%, -50%) translateX(var(--x)) translateY(var(--y)) rotate(var(--r));
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
}
.cm-fan-item .cm-cv{ min-height:250px; }
.cm-fan-item--1{ --x:-175px; --y:40px;  --r:-15deg; z-index:1; }
.cm-fan-item--2{ --x:-92px; --y:2px;   --r:-7deg;  z-index:2; }
.cm-fan-item--3{ --x:0px;    --y:-16px; --r:0deg;   z-index:3; }
.cm-fan-item--4{ --x:92px;  --y:2px;   --r:7deg;   z-index:2; }
.cm-fan-item--5{ --x:175px;  --y:40px;  --r:15deg;  z-index:1; }
.cm-fan-item .cm-cv{ transition:filter .3s ease, border-color .3s ease, box-shadow .3s ease; }
/* La tarjeta señalada se eleva por encima del resto, recta y entera; las demás no se mueven */
.cm-fan .cm-fan-item:hover{
  z-index:5;
  transform:translate(-50%, -50%) translateX(var(--x)) translateY(calc(var(--y) - 30px)) rotate(0deg) scale(1.1);
}
.cm-fan .cm-fan-item:hover .cm-cv{
  border-color:rgba(52,211,153,.7);
  box-shadow:0 28px 60px rgba(0,0,0,.65), 0 0 34px rgba(52,211,153,.2);
}
.cm-fan:hover .cm-fan-item:not(:hover) .cm-cv{ filter:brightness(.6); }
/* Zona invisible bajo la tarjeta elevada: evita el parpadeo si el cursor queda abajo */
.cm-fan .cm-fan-item:hover::after{ content:""; position:absolute; left:0; right:0; top:100%; height:40px; }
.cm-fan-nota{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; text-align:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim-2);
}

/* ---------- Qué es: recorrido del cliente ---------- */
.cm-journey{
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
  margin:0; padding:0; list-style:none;
}
.cm-journey::before{
  content:""; position:absolute; left:28px; right:28px; top:27px; height:2px;
  background:linear-gradient(90deg, rgba(52,211,153,.15), var(--ice-1) 50%, rgba(52,211,153,.15));
}
.cm-stage{ position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; }
.cm-stage-n{
  position:relative; z-index:1; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); border:2px solid var(--ice-1); color:var(--text);
  font-family:var(--ff-serif); font-size:22px; font-weight:600; margin-bottom:6px;
}
.cm-q{ font-family:var(--ff-serif); font-size:22px; font-weight:600; line-height:1.25; color:var(--text); text-wrap:balance; }
.cm-stage > p:not(.cm-q){ color:var(--text-dim); font-size:15.5px; line-height:1.6; }
.cm-stage-what{
  margin-top:auto; padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.22); font-size:14.5px; line-height:1.5; color:var(--text);
}
.cm-stage-what span{ display:block; margin-bottom:4px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }

/* ---------- Qué incluye: mosaico de anchos alternos, cada formato con su propio dibujo (todo visible, sin script) ---------- */
.cm-bx-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.cm-bx{
  position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; padding:32px 32px 26px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel);
}
.cm-bx--7{ grid-column:span 7; } .cm-bx--5{ grid-column:span 5; } .cm-bx--6{ grid-column:span 6; }
/* Tarjeta destacada: esquinas marcadas y un brillo verde */
.cm-bx--hl{
  border-color:rgba(52,211,153,.35);
  background:
    linear-gradient(#34d399,#34d399) top left / 18px 2px no-repeat, linear-gradient(#34d399,#34d399) top left / 2px 18px no-repeat,
    linear-gradient(#34d399,#34d399) top right / 18px 2px no-repeat, linear-gradient(#34d399,#34d399) top right / 2px 18px no-repeat,
    linear-gradient(#34d399,#34d399) bottom left / 18px 2px no-repeat, linear-gradient(#34d399,#34d399) bottom left / 2px 18px no-repeat,
    linear-gradient(#34d399,#34d399) bottom right / 18px 2px no-repeat, linear-gradient(#34d399,#34d399) bottom right / 2px 18px no-repeat,
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(52,211,153,.12), transparent 70%), var(--panel);
  border-radius:4px;
}
.cm-bx-lead{ font-family:var(--ff-head); font-size:16px; font-weight:600; color:var(--text); }
.cm-bx-t{ font-family:var(--ff-serif); font-size:clamp(32px, 3.4vw, 44px); font-weight:600; line-height:1.05; letter-spacing:-.015em; color:var(--ice-1); }
.cm-bx-d{ color:var(--text-dim); font-size:15.5px; line-height:1.65; }
.cm-bx-f{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border-soft); font-family:var(--ff-mono); font-size:12px; line-height:1.6; color:var(--text-dim); }
.cm-bx-f span{ color:var(--ice-1); text-transform:uppercase; letter-spacing:.08em; margin-right:8px; }

/* Dibujos: elementos comunes */
.cm-vis{ position:relative; display:flex; flex-direction:column; gap:10px; margin:4px 0 6px; }
.cm-vis-cap{ display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--text-dim-2); }
.cm-vis-axis{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:11.5px; color:var(--text-dim); }
.cm-vis-axis .g{ color:var(--ice-1); }
.cm-key{ width:10px; height:10px; border-radius:2px; background:#34d399; }

/* 1 · plan del trimestre: cuadrícula */
.cm-wf-grid{ display:grid; grid-template-columns:40px repeat(8, minmax(0,1fr)); gap:5px; align-items:center; }
.cm-wf-m{ font-family:var(--ff-mono); font-size:11.5px; color:var(--text-dim); }
.cm-wf-grid i{ height:22px; border-radius:3px; background:rgba(255,255,255,.07); }
.cm-wf-grid i.on{ background:linear-gradient(180deg, #34d399, #10b981); }

/* 2 · línea que sube */
.cm-line svg{ display:block; width:100%; height:120px; }
.cm-line-path{ fill:none; stroke:#34d399; stroke-width:2.5; stroke-linecap:round; }
.cm-line-dot{ position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); }
.cm-line-dot--a{ left:2%; top:86.7%; top:calc(104 / 120 * 120px); background:var(--panel); border:2px solid #34d399; }
.cm-line-dot--b{ left:98%; top:calc(12 / 120 * 120px); background:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.2); }

/* 3 · barra partida */
.cm-split-bar{ display:flex; gap:3px; height:44px; }
.cm-split-bar .a{ flex:0 0 28%; border-radius:4px 0 0 4px; background:#34d399; }
.cm-split-bar .b{ flex:1; border-radius:0 4px 4px 0; background:rgba(255,255,255,.08); }

/* 4 · antes y después */
.cm-ba-row{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:center; }
.cm-ba-l{ font-family:var(--ff-mono); font-size:11.5px; color:var(--text-dim); }
.cm-ba-l.g{ color:var(--ice-1); }
.cm-ba-bar{ height:26px; border-radius:4px; background:rgba(255,255,255,.05); overflow:hidden; }
.cm-ba-bar i{ display:block; width:var(--w); height:100%; border-radius:4px; background:rgba(255,255,255,.2); }
.cm-ba-bar i.on{ background:linear-gradient(90deg, #059669, #34d399); }

/* 5 · fases */
.cm-steps ol{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; align-items:end; }
.cm-steps li{
  display:flex; align-items:flex-end; justify-content:flex-start; height:calc(34px + var(--k) * 20px); padding:8px 10px;
  border-radius:6px; background:color-mix(in srgb, #34d399 calc(10% + var(--k) * 14%), transparent);
}
.cm-steps b{ font-family:var(--ff-serif); font-size:20px; font-weight:600; color:var(--text); }

/* 6 · página de servicio */
.cm-wire-page{ display:flex; flex-direction:column; gap:7px; padding:12px 16px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.cm-wire-top{ display:flex; gap:5px; margin-bottom:2px; }
.cm-wire-top i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
.cm-wire-h{ height:12px; width:62%; border-radius:3px; background:#34d399; }
.cm-wire-l{ height:6px; border-radius:3px; background:rgba(255,255,255,.1); }
.cm-wire-l.s, .cm-wire-q i.s{ width:55%; }
.cm-wire-btn{ align-self:flex-start; margin:4px 0; padding:5px 12px; border-radius:999px; background:#34d399; color:#04140d; font-family:var(--ff-head); font-size:11px; font-weight:700; }
.cm-wire-q{ display:flex; align-items:center; gap:8px; padding-top:6px; border-top:1px solid var(--border-soft); }
.cm-wire-q b{ font-family:var(--ff-mono); font-size:12px; color:var(--ice-1); }
.cm-wire-q i{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.1); }

/* ---------- Cómo trabajamos: el camino de una pieza ---------- */
.cm-flow{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; counter-reset:none; }
.cm-flow li{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 20px 22px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel);
}
.cm-flow li + li::before{
  content:""; position:absolute; left:-15px; top:40px; width:16px; height:2px; background:var(--border);
}
.cm-flow-n{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border); font-family:var(--ff-mono); font-size:13px; color:var(--text-dim);
}
.cm-flow h3{ font-family:var(--ff-head); font-size:19px; font-weight:600; }
.cm-flow p{ color:var(--text-dim); font-size:14.5px; line-height:1.6; }
.cm-flow-you{ border-color:rgba(52,211,153,.45) !important; background:linear-gradient(180deg, rgba(52,211,153,.10), transparent 70%), var(--panel) !important; }
.cm-flow-you .cm-flow-n{ background:var(--ice-1); border-color:var(--ice-1); color:#03140d; font-weight:700; }

/* ---------- Qué recibes cada mes: informe ---------- */
.cm-report-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:64px; align-items:center; }
.cm-report-text .h2{ display:block; margin:14px 0 18px; text-wrap:balance; }
.cm-checks{ display:grid; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.cm-checks li{ position:relative; padding-left:30px; font-size:15.5px; line-height:1.5; color:var(--text); }
.cm-checks li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(52,211,153,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cm-report{
  position:relative; margin:0; padding:24px; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.cm-report-top{
  display:flex; justify-content:space-between; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--border-soft);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.cm-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.cm-kpis li{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:var(--radius-sm); background:var(--bg); border:1px solid var(--border-soft); }
.cm-kpi-n{ font-family:var(--ff-head); font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ice-1); font-variant-numeric:tabular-nums; }
.cm-kpis li span:last-child{ font-size:13.5px; line-height:1.4; color:var(--text-dim); }
.cm-report-best{ margin-top:16px; padding:14px 16px; border-left:2px solid var(--ice-1); font-size:14.5px; color:var(--text); }
.cm-report-best span{ display:block; margin-bottom:3px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }

/* ---------- El contenido lo mueve todo: enlaces a SEO, IA y PR ---------- */
.cm-links{ margin:0; padding:0; list-style:none; border-top:1px solid var(--border); }
.cm-link{ border-bottom:1px solid var(--border); }
.cm-link a{
  position:relative; display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:24px; align-items:center;
  padding:28px 8px; color:inherit; text-decoration:none; transition:background-color .25s ease, padding-left .25s ease;
}
.cm-link a::before{ content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:0; background:var(--c); transition:width .25s ease; }
.cm-link a:hover, .cm-link a:focus-visible{ background:color-mix(in srgb, var(--c) 6%, transparent); padding-left:20px; }
.cm-link a:hover::before, .cm-link a:focus-visible::before{ width:3px; }
.cm-link a:focus-visible{ outline:2px solid var(--c); outline-offset:-2px; }
.cm-link--seo{ --c:#22d3ee; }
.cm-link--ai{ --c:#c084fc; }
.cm-link--pr{ --c:#fbbf24; }
.cm-link-k{ font-family:var(--ff-serif); font-size:40px; font-weight:600; line-height:1; color:var(--c); }
.cm-link-t{ display:flex; flex-direction:column; gap:4px; font-size:15.5px; line-height:1.6; color:var(--text-dim); }
.cm-link-t b{ font-family:var(--ff-head); font-size:19px; font-weight:600; color:var(--text); }
.cm-link-go{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--c); }

/* ---------- Preguntas frecuentes en una columna ---------- */
.cm-faq-head{ max-width:760px; margin-bottom:40px; }
.cm-faq-head .h2{ display:block; margin-top:14px; text-wrap:balance; }
.cm-faq{ max-width:880px; }

/* ---------- Adaptación a tablet y móvil ---------- */
@media (max-width: 980px){
  .cm-fan{ height:380px; margin-top:12px; margin-left:0; }
  .cm-journey{ grid-template-columns:1fr; gap:36px; }
  .cm-journey::before{ left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto;
    background:linear-gradient(180deg, rgba(52,211,153,.15), var(--ice-1) 50%, rgba(52,211,153,.15)); }
  .cm-stage{ padding-left:76px; }
  .cm-stage-n{ position:absolute; left:0; top:0; }
  .cm-bx--7, .cm-bx--5, .cm-bx--6{ grid-column:span 12; }
  .cm-flow{ grid-template-columns:1fr; gap:12px; }
  .cm-flow li{ display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:16px; row-gap:4px; }
  .cm-flow li > p, .cm-flow li > h3{ grid-column:2; }
  .cm-flow-n{ grid-row:1 / span 2; }
  .cm-flow li + li::before{ left:35px; top:-13px; width:2px; height:12px; }
  .cm-report-grid{ grid-template-columns:1fr; gap:40px; }
  .cm-link a{ grid-template-columns:60px minmax(0,1fr); }
  .cm-link-go{ grid-column:2; }
}
@media (max-width: 640px){
  .cm-bx{ padding:24px 20px 20px; }
  .cm-bx--hl{ border-radius:4px; }
  .cm-ba-row{ grid-template-columns:96px minmax(0,1fr); gap:10px; }
  .cm-fan{ height:330px; }
  .cm-fan-item{ width:180px; }
  .cm-fan-item .cm-cv{ min-height:210px; padding:14px; }
  .cm-fan-item .cm-cv-t{ font-size:16px; }
  .cm-fan-item--1{ --x:-100px; } .cm-fan-item--2{ --x:-50px; } .cm-fan-item--4{ --x:50px; } .cm-fan-item--5{ --x:100px; }
  .cm-q{ font-size:20px; }
  .cm-kpi-n{ font-size:28px; }
  .cm-link a{ grid-template-columns:1fr; gap:10px; padding:24px 4px; }
  .cm-link-go{ grid-column:1; }
  .cm-link-k{ font-size:32px; }
}
@media (prefers-reduced-motion: reduce){
  .cm-fan-item{ transition:none; }
  .cm-link a, .cm-link a::before{ transition:none; }
}

/* ---------- Content marketing: color propio de la página (verde esmeralda) ----------
   Solo dentro del contenido: cabecera, pie y botones siguen en el azul de la marca. */
.sv-page:has(.sv-hero--cm){
  --ice-1:#34d399; --ice-2:#10b981; --ice-3:#a7f3d0;
  --ice-grad:linear-gradient(135deg, #d1fae5 0%, #34d399 50%, #059669 100%);
}
.sv-page:has(.sv-hero--cm) .btn{
  --ice-1:#22d3ee; --ice-2:#3b82f6; --ice-3:#a8e9ff;
  --ice-grad:linear-gradient(135deg, #7fe7ff 0%, #2f8fef 100%);
}
.sv-page:has(.sv-hero--cm) .page-hero{
  background:
    radial-gradient(ellipse 55% 110% at 88% -10%, rgba(52,211,153,.09), transparent 62%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(16,185,129,.06), transparent 70%),
    var(--bg);
}
.sv-page:has(.sv-hero--cm) .page-hero-glow{ background:radial-gradient(circle, rgba(52,211,153,.11), transparent 65%); }
.sv-page:has(.sv-hero--cm) .sv-faq details[open] summary::after{ border-color:rgba(52,211,153,.5); }
.sv-page:has(.sv-hero--cm) .sv-cta-note a{ text-decoration-color:rgba(52,211,153,.5); }
.sv-page:has(.sv-hero--cm) .cta-box{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(52,211,153,.09), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--bg-alt));
}

/* ==========================================================================
   PUBLICIDAD ONLINE (SEM): cabecera con el recorrido de un anuncio, dos formas de llegar al cliente,
   plataformas por objetivo, ritmo de trabajo (al empezar / cada semana / cada mes), costes,
   anuncios + SEO, preguntas en cuadrícula y color coral de la página. Todo se ve sin script.
   ========================================================================== */

/* ---------- Cabecera: título fijo con la palabra clave y botón compacto, como el resto; en móvil a todo el ancho ---------- */
.sv-hero--sem .page-title{ max-width:none; font-size:clamp(34px, 4vw, 52px); text-wrap:balance; }

/* ---------- Panel "Reparto de tu inversión" ---------- */
.sem-pn{
  position:relative; padding:24px 26px 20px; border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.sem-pn-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.sem-pn-live{ display:inline-flex; align-items:center; gap:8px; color:#ffab91; }
.sem-pn-live i{ width:7px; height:7px; border-radius:50%; background:#ff8a65; animation:semBlink 1.6s ease-in-out infinite; }
.sem-pn-led{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim-2); white-space:nowrap; }
.sem-pn-led::before{ content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); }
.sem-pn-led.on{ color:var(--text-dim); }
.sem-pn-led.on::before{ background:#ff8a65; box-shadow:0 0 8px rgba(255,138,101,.9); }
.sem-pn-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:13.5px; color:var(--text-dim); text-align:center; }
@keyframes semBlink{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }

/* ---------- Bloques de presupuesto ---------- */
.sem-bk-list{ display:grid; gap:16px; margin:0; padding:22px 0 4px; list-style:none; }
.sem-bk-row{ display:grid; grid-template-columns:96px minmax(0,1fr) 78px; align-items:center; gap:14px; }
.sem-bk-name{ font-family:var(--ff-head); font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; }
.sem-bk-row.off .sem-bk-name{ color:var(--text-dim-2); }
.sem-bk-cells{ display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:5px; }
.sem-bk-cells i{ height:22px; border-radius:5px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
/* cada bloque sigue su propia secuencia encendido/apagado en las 3 semanas (k + a,b,c) */
.sem-k111{ background:linear-gradient(180deg, #ffab91, #ff8a65) !important; box-shadow:0 0 12px -2px rgba(255,138,101,.5) !important; }
.sem-k100, .sem-k010, .sem-k001, .sem-k110, .sem-k101, .sem-k011{ animation:9s ease-in-out infinite; }
.sem-k100{ animation-name:semK100; } .sem-k010{ animation-name:semK010; } .sem-k001{ animation-name:semK001; }
.sem-k110{ animation-name:semK110; } .sem-k101{ animation-name:semK101; } .sem-k011{ animation-name:semK011; }
@keyframes semK100{ 0%, 28%, 100%{ background:#ff8a65; } 34%, 94%{ background:rgba(255,255,255,.05); } }
@keyframes semK010{ 0%, 28%, 66%, 100%{ background:rgba(255,255,255,.05); } 34%, 60%{ background:#ff8a65; } }
@keyframes semK001{ 0%, 60%, 100%{ background:rgba(255,255,255,.05); } 66%, 94%{ background:#ff8a65; } }
@keyframes semK110{ 0%, 60%, 100%{ background:#ff8a65; } 66%, 94%{ background:rgba(255,255,255,.05); } }
@keyframes semK101{ 0%, 28%, 66%, 100%{ background:#ff8a65; } 34%, 60%{ background:rgba(255,255,255,.05); } }
@keyframes semK011{ 0%, 28%, 100%{ background:rgba(255,255,255,.05); } 34%, 94%{ background:#ff8a65; } }

@media (max-width:640px){
  .sem-pn{ padding:18px 16px 16px; }
  .sem-pn-top{ font-size:10px; }
  .sem-bk-list{ gap:12px; }
  .sem-bk-row{ grid-template-columns:72px minmax(0,1fr) 10px; gap:10px; }
  .sem-bk-name{ font-size:12px; white-space:normal; line-height:1.2; }
  .sem-bk-cells{ gap:3px; }
  .sem-bk-cells i{ height:18px; border-radius:4px; }
  .sem-pn-led{ font-size:0; gap:0; }
}
@media (prefers-reduced-motion:reduce){
  .sem-pn-live i, .sem-bk-cells i{ animation:none !important; }
}

/* ---------- Qué es: dos formas de llegar al cliente ---------- */
.sem-modes{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:0; align-items:stretch; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.sem-mode{ display:flex; flex-direction:column; gap:14px; padding:36px 40px; }
.sem-mode-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }
.sem-mode-t{ font-family:var(--ff-serif); font-size:26px; font-weight:600; line-height:1.2; color:var(--text); text-wrap:balance; }
.sem-mode > p:not(.sem-mode-t):not(.sem-mode-where){ color:var(--text-dim); font-size:16px; line-height:1.65; }
.sem-mode-where{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); font-size:14.5px; color:var(--text); }
.sem-mode-where span{ display:block; margin-bottom:4px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim-2); }
.sem-modes-or{ position:relative; display:grid; place-items:center; width:1px; background:var(--border); }
.sem-modes-or::after{ content:"y"; position:absolute; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--bg); border:2px solid var(--ice-1); font-family:var(--ff-serif); font-style:italic; font-size:20px; color:var(--text); }
.sem-modes-or{ font-size:0; }

/* ---------- Dónde anunciamos: tabla plataforma × objetivo ---------- */
.sem-matrix table{ width:100%; border-collapse:collapse; }
.sem-matrix caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sem-matrix th, .sem-matrix td{ padding:18px 16px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; }
.sem-matrix thead th{ font-family:var(--ff-mono); font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); border-bottom-color:rgba(255,138,101,.35); }
.sem-matrix thead th:first-child, .sem-matrix tbody th{ text-align:left; padding-left:0; }
.sem-matrix tbody th b{ display:block; font-family:var(--ff-head); font-size:18px; font-weight:600; color:var(--text); }
.sem-matrix tbody th span{ display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--text-dim); }
.sem-matrix tbody tr{ transition:background-color .2s ease; }
.sem-matrix tbody tr:hover{ background:rgba(255,138,101,.05); }
.sem-dot{ display:inline-block; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.08); vertical-align:middle; }
.sem-dot--hi{ width:18px; height:18px; background:#ff8a65; box-shadow:0 0 0 5px rgba(255,138,101,.16); }
.sem-dot--ok{ background:transparent; border:2px solid #ff8a65; }
.sem-legend{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:22px; font-size:14px; color:var(--text-dim); }
.sem-legend span{ display:inline-flex; align-items:center; gap:10px; }
.sem-legend span:last-child{ margin-left:auto; color:var(--text-dim-2); }
.sem-legend .sem-dot{ width:14px; height:14px; box-shadow:none; }

/* ---------- Qué incluye: al empezar / cada semana / cada mes ---------- */
.sem-rhythm{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; align-items:start; }
.sem-col{ padding:32px 30px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.sem-col--hl{ border-color:rgba(255,138,101,.45); background:linear-gradient(180deg, rgba(255,138,101,.09), transparent 40%), var(--panel); }
.sem-col-k{ display:inline-block; padding:4px 12px; border-radius:var(--radius-pill); border:1px solid rgba(255,138,101,.4); font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#ffab91; }
.sem-col--hl .sem-col-k{ background:#ff8a65; border-color:#ff8a65; color:#1f0d06; }
.sem-col h3{ margin:18px 0 20px; font-family:var(--ff-serif); font-size:30px; font-weight:600; line-height:1.1; color:var(--text); }
.sem-col ul{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.sem-col li{ padding:14px 0; border-top:1px solid var(--border); font-size:15px; line-height:1.55; color:var(--text-dim); }
.sem-col li b{ display:block; margin-bottom:2px; font-family:var(--ff-head); font-size:16px; font-weight:600; color:var(--text); }

/* ---------- Cuánto cuesta: dos partes ---------- */
.sem-cost{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); }
.sem-cost-part{ display:flex; flex-direction:column; gap:14px; padding:38px 40px; }
.sem-cost-part--ads{ background:var(--panel); }
.sem-cost-part--us{ background:linear-gradient(160deg, rgba(255,138,101,.14), rgba(255,138,101,.03) 60%), var(--panel-2); border-left:1px solid rgba(255,138,101,.35); }
.sem-cost-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.sem-cost-part--us .sem-cost-k{ color:#ffab91; }
.sem-cost-t{ font-family:var(--ff-serif); font-size:26px; font-weight:600; line-height:1.2; color:var(--text); text-wrap:balance; }
.sem-cost-part > p:not(.sem-cost-t){ color:var(--text-dim); font-size:16px; line-height:1.65; }
.sem-factors{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none; }
.sem-factors li{ padding:7px 14px; border-radius:var(--radius-pill); background:rgba(255,138,101,.1); border:1px solid rgba(255,138,101,.3); font-size:14px; color:var(--text); }

/* ---------- Anuncios + SEO ---------- */
.sem-seo{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:center; }
.sem-seo-text .h2{ display:block; margin:14px 0 18px; text-wrap:balance; }
.sem-seo-pair{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.sem-seo-card{ --c:#ff8a65; display:flex; flex-direction:column; gap:4px; padding:24px 26px; border-radius:var(--radius-md); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); background:color-mix(in srgb, var(--c) 7%, var(--panel)); font-size:15px; color:var(--text-dim); }
.sem-seo-card--seo{ --c:#22d3ee; margin-left:40px; }
.sem-seo-card span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c); }
.sem-seo-card b{ font-family:var(--ff-serif); font-size:24px; font-weight:600; color:var(--text); }
.sem-seo-card a{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--c); text-decoration:none; }
.sem-seo-card a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Preguntas frecuentes en una columna ---------- */
.sem-faq-head{ max-width:760px; margin-bottom:40px; }
.sem-faq-head .h2{ display:block; margin-top:14px; text-wrap:balance; }
.sem-faq{ display:grid; gap:12px; max-width:880px; }
.sem-faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); transition:border-color .2s ease; }
.sem-faq details[open]{ border-color:rgba(255,138,101,.4); }
.sem-faq summary{ position:relative; padding:22px 56px 22px 24px; cursor:pointer; list-style:none; font-family:var(--ff-head); font-size:17px; font-weight:600; line-height:1.4; color:var(--text); }
.sem-faq summary::-webkit-details-marker{ display:none; }
.sem-faq summary::after{ content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-family:var(--ff-mono); font-size:22px; font-weight:400; color:#ff8a65; }
.sem-faq details[open] summary::after{ content:"−"; }
.sem-faq summary:focus-visible{ outline:2px solid #ff8a65; outline-offset:-2px; border-radius:var(--radius-sm); }
.sem-faq details p{ padding:0 24px 22px; color:var(--text-dim); font-size:15.5px; line-height:1.7; }

/* ---------- Color coral de la página ---------- */
.sv-page:has(.sv-hero--sem){
  --ice-1:#ff8a65; --ice-2:#f4511e; --ice-3:#ffccbc;
  --ice-grad:linear-gradient(135deg, #ffe0d6 0%, #ff8a65 50%, #e64a19 100%);
}
.sv-page:has(.sv-hero--sem) .btn{
  --ice-1:#22d3ee; --ice-2:#3b82f6; --ice-3:#a8e9ff;
  --ice-grad:linear-gradient(135deg, #7fe7ff 0%, #2f8fef 100%);
}
.sv-page:has(.sv-hero--sem) .page-hero{
  background:
    radial-gradient(ellipse 55% 110% at 88% -10%, rgba(255,138,101,.09), transparent 62%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(244,81,30,.06), transparent 70%),
    var(--bg);
}
.sv-page:has(.sv-hero--sem) .page-hero-glow{ background:radial-gradient(circle, rgba(255,138,101,.11), transparent 65%); }
.sv-page:has(.sv-hero--sem) .sv-cta-note a{ text-decoration-color:rgba(255,138,101,.5); }
.sv-page:has(.sv-hero--sem) .cta-box{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(255,138,101,.09), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--bg-alt));
}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .sem-modes{ grid-template-columns:1fr; }
  .sem-modes-or{ width:auto; height:1px; }
  .sem-mode{ padding:30px 28px; }
  .sem-rhythm{ grid-template-columns:1fr; }
  .sem-cost{ grid-template-columns:1fr; }
  .sem-cost-part--us{ border-left:0; border-top:1px solid rgba(255,138,101,.35); }
  .sem-seo{ grid-template-columns:1fr; gap:36px; }

  /* la tabla pasa a tarjetas: cada plataforma con sus objetivos */
  .sem-matrix thead{ display:none; }
  .sem-matrix table, .sem-matrix tbody{ display:block; }
  .sem-matrix tbody{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .sem-matrix tr{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding:20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); }
  .sem-matrix tbody th{ grid-column:1 / -1; padding:0 0 6px; border:0; }
  .sem-matrix td{ display:flex; align-items:center; gap:10px; padding:0; border:0; text-align:left; font-size:13.5px; color:var(--text-dim); }
  .sem-matrix td::after{ content:attr(data-l); }
  .sem-matrix td:has(.sem-dot:not(.sem-dot--hi):not(.sem-dot--ok)){ opacity:.45; }
  .sem-matrix .sem-dot{ flex:none; width:14px; height:14px; box-shadow:none; }
  .sem-legend span:last-child{ margin-left:0; width:100%; }
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .sem-matrix tbody{ grid-template-columns:1fr; }
  .sem-col{ padding:26px 22px; }
  .sem-col h3{ font-size:26px; }
  .sem-cost-part{ padding:28px 24px; }
  .sem-mode-t, .sem-cost-t{ font-size:23px; }
  .sem-seo-card--seo{ margin-left:0; }
  .sem-faq summary{ font-size:16px; padding:18px 48px 18px 18px; }
  .sem-faq details p{ padding:0 18px 18px; }
}

/* ==========================================================================
   DISEÑO WEB: cabecera con la mesa de diseño, tipos de web, 5 pasos, cuándo hacer una web nueva,
   lo que ve tu cliente / lo que ve Google, presupuesto, tu web conectada con los servicios,
   preguntas en una columna y color fucsia de la página. Todo se ve sin script.
   ========================================================================== */

/* ---------- Cabecera: título fijo con la palabra clave y botón compacto, como el resto; en móvil a todo el ancho ---------- */
.sv-hero--web .page-title{ max-width:none; font-size:clamp(34px, 4vw, 52px); text-wrap:balance; }
/* título en 3 líneas: las palabras en rosa siguen la línea en vez de saltar a una aparte */
.sv-hero--web .page-title .h2-accent{ display:inline; -webkit-box-decoration-break:slice; box-decoration-break:slice; }
@media (max-width:380px){ .sv-hero--web .page-title{ font-size:30px; } }

/* ---------- Cabecera: mesa de diseño (ciclo de 10 s). Medidas en cqw para que escale igual en móvil ---------- */
.dwh{ position:relative; width:100%; max-width:540px; aspect-ratio:520 / 440; margin-left:auto; container-type:inline-size; }
.dwa-win{
  position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-md); background:var(--panel);
  border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.dwa-top{ position:absolute; left:0; right:0; top:0; height:9%; display:flex; align-items:center; gap:1.3cqw; padding:0 2.6cqw; border-bottom:1px solid var(--border); background:var(--panel-2); }
.dwa-top i{ width:1.7cqw; height:1.7cqw; border-radius:50%; background:rgba(255,255,255,.14); }
.dwa-top span{ margin-left:2cqw; font-family:var(--ff-mono); font-size:1.9cqw; color:var(--text-dim-2); }

.dwa-tools{ position:absolute; left:0; top:9%; bottom:0; width:9%; display:flex; flex-direction:column; align-items:center; gap:2.2cqw; padding-top:3cqw; border-right:1px solid var(--border); background:var(--panel-2); }
.dwa-tools span{ display:grid; place-items:center; width:4.6cqw; height:4.6cqw; border-radius:1cqw; background-position:center; background-repeat:no-repeat; background-size:2.6cqw; font-family:var(--ff-head); font-size:2.6cqw; font-weight:700; color:var(--text-dim); }
.dwa-t1{ background-color:rgba(236,72,153,.2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.6L10 19z' fill='%23f9a8d4'/%3E%3C/svg%3E"); }
.dwa-t2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a7bd' stroke-width='2.2'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3C/svg%3E"); }
.dwa-t4{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a7bd' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z'/%3E%3C/svg%3E"); }
.dwa-side{ position:absolute; right:0; top:9%; bottom:0; width:24%; display:flex; flex-direction:column; gap:1.6cqw; padding:3cqw 2.6cqw; border-left:1px solid var(--border); background:var(--panel-2); }
.dwa-side b, .dwa-side-k{ font-family:var(--ff-mono); font-size:1.8cqw; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim-2); }
.dwa-sw{ display:flex; gap:1.4cqw; margin-bottom:3cqw; }
.dwa-sw i{ width:3.4cqw; height:3.4cqw; border-radius:50%; background:var(--s); box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.dwa-sw .is-pick{ animation:dwaSw 10s ease-out infinite; }
@keyframes dwaSw{ 0%, 42%{ box-shadow:0 0 0 1px rgba(255,255,255,.18); } 44%, 96%{ box-shadow:0 0 0 .5cqw var(--panel-2), 0 0 0 .9cqw #ec4899; } 100%{ box-shadow:0 0 0 1px rgba(255,255,255,.18); } }
.dwa-type{ display:grid; gap:1.2cqw; }
.dwa-type span{ padding:1cqw 1.6cqw; border-radius:1cqw; border:1px solid var(--border); font-size:3.2cqw; line-height:1.2; color:var(--text); }
.dwa-sans{ font-family:var(--ff-head); font-weight:600; }
.dwa-serif{ font-family:var(--ff-serif); font-weight:600; }
.dwa-type .is-pick{ animation:dwaType 10s ease-out infinite; }
@keyframes dwaType{ 0%, 58%{ border-color:var(--border); background:transparent; } 60%, 96%{ border-color:#ec4899; background:rgba(236,72,153,.14); } 100%{ border-color:var(--border); background:transparent; } }

.dwa-board{
  position:absolute; left:13%; top:15%; width:60%; height:79%; border-radius:1.4cqw; background-color:var(--bg);
  background-image:linear-gradient(rgba(236,72,153,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(236,72,153,.06) 1px, transparent 1px); background-size:3.6cqw 3.6cqw;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); animation:dwaBoard 10s linear infinite;
}
@keyframes dwaBoard{ 0%{ opacity:0; } 3%, 96%{ opacity:1; } 100%{ opacity:0; } }
.dwa-nav{ position:absolute; left:6%; right:6%; top:4%; height:6%; display:flex; align-items:center; gap:4%; }
.dwa-nav i{ width:16%; height:50%; border-radius:.6cqw; animation:dwaFill 10s ease-out infinite; }
.dwa-nav span{ width:9%; height:24%; border-radius:1cqw; background:rgba(255,255,255,.2); }
.dwa-nav span:nth-child(2){ margin-left:auto; }
.dwa-title{ position:absolute; left:6%; top:16%; font-size:6.2cqw; line-height:1; color:var(--text); }
.dwa-title span{ display:block; }
.dwa-title .dwa-serif{ position:absolute; left:0; top:0; opacity:0; animation:dwaSerif 10s ease-out infinite; }
.dwa-title .dwa-sans{ animation:dwaSans 10s ease-out infinite; }
@keyframes dwaSerif{ 0%, 60%{ opacity:0; } 63%, 100%{ opacity:1; } }
@keyframes dwaSans{ 0%, 60%{ opacity:1; } 63%, 100%{ opacity:0; } }
.dwa-sub{ position:absolute; left:6%; top:31%; width:38%; height:2.4%; border-radius:1cqw; background:rgba(255,255,255,.2); }
.dwa-sub2{ top:36.5%; width:30%; }
.dwa-btn{ position:absolute; left:6%; top:45%; width:27%; height:7.5%; border-radius:999px; animation:dwaFill 10s ease-out infinite; }
@keyframes dwaFill{ 0%, 45%{ background:rgba(255,255,255,.2); } 47%, 100%{ background:linear-gradient(90deg, #f472b6, #db2777); } }
.dwa-cards{ position:absolute; left:6%; right:6%; top:63%; bottom:6%; display:grid; grid-template-columns:repeat(3, 1fr); gap:4%; }
.dwa-cards i{ border-radius:1cqw; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.dwa-img{
  position:absolute; left:52%; top:16%; width:42%; height:38%; border-radius:1cqw; z-index:2;
  background:radial-gradient(circle at 74% 30%, rgba(255,255,255,.55) 0 7%, transparent 7.5%), linear-gradient(135deg, rgba(236,72,153,.6), rgba(131,24,67,.4));
  outline:1px dashed #ec4899; outline-offset:.5cqw; animation:dwaImg 10s cubic-bezier(.45,.05,.3,1) infinite;
}
.dwa-img::after{ content:""; position:absolute; left:8%; right:8%; bottom:10%; height:45%; background:rgba(255,255,255,.3); clip-path:polygon(0 100%, 32% 25%, 55% 70%, 70% 50%, 100% 100%); }
.dwa-img u{ position:absolute; width:1.4cqw; height:1.4cqw; background:#fff; border:1px solid #ec4899; animation:dwaHandles 10s linear infinite; }
.dwa-img u:nth-child(1){ left:-1.2cqw; top:-1.2cqw; } .dwa-img u:nth-child(2){ right:-1.2cqw; top:-1.2cqw; }
.dwa-img u:nth-child(3){ left:-1.2cqw; bottom:-1.2cqw; } .dwa-img u:nth-child(4){ right:-1.2cqw; bottom:-1.2cqw; }
@keyframes dwaImg{
  0%, 5%{ transform:translate(22%, 72%) rotate(-4deg); outline-color:#ec4899; }
  25%{ transform:none; outline-color:#ec4899; }
  33%, 100%{ transform:none; outline-color:transparent; }
}
@keyframes dwaHandles{ 0%, 31%{ opacity:1; } 33%, 100%{ opacity:0; } }
.dwa-gv, .dwa-gh{ position:absolute; background:#ec4899; opacity:0; animation:dwaGuide 10s linear infinite; z-index:1; }
.dwa-gv{ left:52%; top:0; bottom:0; width:1px; }
.dwa-gh{ top:16%; left:0; right:0; height:1px; }
@keyframes dwaGuide{ 0%, 21%{ opacity:0; } 24%, 32%{ opacity:1; } 36%, 100%{ opacity:0; } }
.dwa-cursor{ position:absolute; z-index:5; width:4cqw; height:4cqw; margin:-.8cqw 0 0 -.9cqw; filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.6)); animation:dwaCursor 10s ease-in-out infinite; }
@keyframes dwaCursor{
  0%{ left:62.3%; top:63.5%; opacity:0; transform:none; }
  3%{ left:62.3%; top:63.5%; opacity:1; transform:none; }
  5%{ left:62.3%; top:63.5%; transform:scale(.85); }
  25%{ left:56.8%; top:43%; transform:scale(.85); }
  28%{ left:56.8%; top:43%; transform:none; }
  40%{ left:89.9%; top:19.6%; transform:none; }
  43%{ left:89.9%; top:19.6%; transform:scale(.8); }
  46%{ left:89.9%; top:19.6%; transform:none; }
  56%{ left:86%; top:44.5%; transform:none; }
  59%{ left:86%; top:44.5%; transform:scale(.8); }
  62%{ left:86%; top:44.5%; transform:none; opacity:1; }
  72%{ left:97%; top:97%; opacity:1; }
  76%, 100%{ left:97%; top:97%; opacity:0; }
}

@media (max-width:980px){
  .dwh{ margin:0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .dwh *{ animation:none !important; }
  .dwa-cursor, .dwa-gv, .dwa-gh, .dwa-img u{ display:none; }
  .dwa-img{ outline-color:transparent; }
  .dwa-btn, .dwa-nav i{ background:linear-gradient(90deg, #f472b6, #db2777); }
  .dwa-title .dwa-sans{ opacity:0; } .dwa-title .dwa-serif{ opacity:1; }
}

/* ---------- Qué hacemos: tipos de web con su miniatura ---------- */
.dw-types{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.dw-type{ display:flex; flex-direction:column; gap:10px; padding:24px 22px 26px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); transition:border-color .2s ease, transform .2s ease; }
.dw-type:hover{ border-color:rgba(236,72,153,.45); transform:translateY(-3px); }
.dw-type h3{ margin-top:8px; font-family:var(--ff-head); font-size:18px; font-weight:600; color:var(--text); }
.dw-type p{ font-size:14.5px; line-height:1.6; color:var(--text-dim); }
.dw-type--maint{ background:linear-gradient(180deg, rgba(236,72,153,.08), transparent 50%), var(--panel); border-style:dashed; border-color:rgba(236,72,153,.4); }

/* miniaturas dibujadas solo con CSS */
.dw-thumb{ display:grid; gap:5px; height:86px; padding:9px; border-radius:10px; background:var(--bg); border:1px solid rgba(255,255,255,.08); }
.dw-thumb i{ border-radius:4px; background:rgba(255,255,255,.1); }
.dw-thumb i:first-child{ background:rgba(236,72,153,.6); }
.dw-thumb--corp{ grid-template-columns:1fr 1fr 1fr; grid-template-rows:8px 1fr 14px; }
.dw-thumb--corp i:nth-child(1){ grid-column:1 / 2; }
.dw-thumb--corp i:nth-child(2){ grid-column:1 / -1; background:rgba(255,255,255,.16); }
.dw-thumb--corp i:nth-child(3){ grid-column:1 / 3; }
.dw-thumb--corp i:nth-child(4){ grid-column:3 / 4; }
.dw-thumb--shop{ grid-template-columns:repeat(3, 1fr); grid-template-rows:8px 1fr 1fr; }
.dw-thumb--shop i:nth-child(1){ grid-column:1 / -1; width:40%; }
.dw-thumb--land{ grid-template-rows:1fr 12px 8px; justify-items:center; }
.dw-thumb--land i:nth-child(1){ width:100%; background:rgba(255,255,255,.16); }
.dw-thumb--land i:nth-child(2){ width:46%; border-radius:var(--radius-pill); background:linear-gradient(90deg, #f472b6, #db2777); }
.dw-thumb--land i:nth-child(3){ width:30%; }
.dw-thumb--redo{ grid-template-columns:1fr 14px 1fr; grid-template-rows:1fr 1fr; align-items:stretch; }
.dw-thumb--redo i:nth-child(1){ grid-row:1 / -1; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18); }
.dw-thumb--redo i:nth-child(2){ grid-row:1 / -1; align-self:center; height:14px; background:none; border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat; }
.dw-thumb--redo i:nth-child(3){ background:rgba(236,72,153,.6); }
.dw-thumb--redo i:nth-child(4){ grid-column:3; background:rgba(255,255,255,.16); }
.dw-thumb--care{ grid-template-rows:repeat(3, 1fr); }
.dw-thumb--care i{ position:relative; background:rgba(255,255,255,.07); }
.dw-thumb--care i::after{ content:""; position:absolute; left:6px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#ec4899; box-shadow:0 0 8px rgba(236,72,153,.8); }
.dw-thumb--care i:first-child{ background:rgba(255,255,255,.07); }

/* ---------- Lo que ve tu cliente / lo que ve Google ---------- */
.dw-views{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.dw-view{ padding:36px 40px; }
.dw-view--people{ background:var(--panel); }
.dw-view--google{ position:relative; border-left:1px solid var(--border);
  background-color:var(--bg-alt);
  background-image:linear-gradient(rgba(236,72,153,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236,72,153,.05) 1px, transparent 1px);
  background-size:22px 22px; }
.dw-view-k{ display:inline-block; padding:4px 12px; border-radius:var(--radius-pill); border:1px solid rgba(236,72,153,.4); font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#f9a8d4; }
.dw-view--google .dw-view-k{ background:#ec4899; border-color:#ec4899; color:#2a0716; }
.dw-view ul{ display:grid; margin:22px 0 0; padding:0; list-style:none; }
.dw-view li{ padding:16px 0; border-top:1px solid var(--border); font-size:15px; line-height:1.55; color:var(--text-dim); }
.dw-view li b, .dw-view li strong{ display:block; margin-bottom:2px; font-family:var(--ff-head); font-size:17px; font-weight:600; color:var(--text); }
.dw-view--google li b, .dw-view--google li strong{ font-family:var(--ff-mono); font-size:14.5px; font-weight:700; letter-spacing:.01em; color:#fbcfe8; }
.dw-view--google li b::before, .dw-view--google li strong::before{ content:"<"; color:#ec4899; }
.dw-view--google li b::after, .dw-view--google li strong::after{ content:">"; color:#ec4899; }
.dw-view-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:#22d3ee; text-decoration:none; }
.dw-view-link:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Cómo trabajamos: 5 pasos en línea ---------- */
.dw-steps{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; counter-reset:none; }
.dw-steps::before{ content:""; position:absolute; top:27px; left:28px; right:calc((100% - 80px) / 5 - 28px); height:2px; background:linear-gradient(90deg, #ec4899, rgba(236,72,153,.15)); }
.dw-steps li{ position:relative; display:flex; flex-direction:column; gap:10px; }
.dw-step-n{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--bg); border:2px solid #ec4899; font-family:var(--ff-mono); font-size:15px; font-weight:700; color:#f9a8d4; box-shadow:0 0 0 6px var(--bg); }
.section-dark .dw-step-n{ background:var(--bg-alt); box-shadow:0 0 0 6px var(--bg-alt); }
.dw-steps li.dw-step--dest .dw-step-n, .dw-steps li:nth-child(3):not(.dw-step) .dw-step-n{ background:#ec4899; color:#2a0716; }
.dw-steps h3{ margin-top:8px; font-family:var(--ff-serif); font-size:24px; font-weight:600; color:var(--text); }
.dw-steps p{ font-size:15px; line-height:1.6; color:var(--text-dim); }

/* ---------- Cuánto cuesta: proyecto + aparte ---------- */
.dw-quote{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; }
.dw-quote-main, .dw-quote-extra{ display:flex; flex-direction:column; gap:14px; padding:38px 40px; border-radius:var(--radius-md); }
.dw-quote-main{ background:linear-gradient(160deg, rgba(236,72,153,.15), rgba(236,72,153,.03) 60%), var(--panel-2); border:1px solid rgba(236,72,153,.4); }
.dw-quote-extra{ background:var(--panel); border:1px dashed rgba(255,255,255,.16); }
.dw-quote-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.dw-quote-main .dw-quote-k{ color:#f9a8d4; }
.dw-quote-t{ font-family:var(--ff-serif); font-size:28px; font-weight:600; line-height:1.2; color:var(--text); text-wrap:balance; }
.dw-quote-main > p:not(.dw-quote-t){ color:var(--text-dim); font-size:16px; }
.dw-factors{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.dw-factors li{ padding:7px 14px; border-radius:var(--radius-pill); background:rgba(236,72,153,.1); border:1px solid rgba(236,72,153,.3); font-size:14px; color:var(--text); }
.dw-extra{ display:grid; gap:2px; padding:16px 0 0; border-top:1px solid var(--border); }
.dw-extra b, .dw-extra-t{ font-family:var(--ff-head); font-size:18px; font-weight:600; color:var(--text); }
.dw-extra span{ font-size:15px; color:var(--text-dim); }

/* ---------- Preguntas frecuentes en una columna ---------- */
.dw-faq-head{ max-width:760px; margin-bottom:40px; }
.dw-faq-head .h2{ display:block; margin-top:14px; text-wrap:balance; }
.dw-faq{ display:grid; gap:12px; max-width:880px; }
.dw-faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); transition:border-color .2s ease; }
.dw-faq details[open]{ border-color:rgba(236,72,153,.4); }
.dw-faq summary{ position:relative; padding:22px 56px 22px 24px; cursor:pointer; list-style:none; font-family:var(--ff-head); font-size:17px; font-weight:600; line-height:1.4; color:var(--text); }
.dw-faq summary::-webkit-details-marker{ display:none; }
.dw-faq summary::after{ content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-family:var(--ff-mono); font-size:22px; font-weight:400; color:#ec4899; }
.dw-faq details[open] summary::after{ content:"−"; }
.dw-faq summary:focus-visible{ outline:2px solid #ec4899; outline-offset:-2px; border-radius:var(--radius-sm); }
.dw-faq details p{ padding:0 24px 22px; color:var(--text-dim); font-size:15.5px; line-height:1.7; }

/* ---------- ¿Cuándo es el mejor momento para una web nueva? Titular a todo el ancho + 6 situaciones ---------- */
.dw-head-full{ display:block; }
.dw-head-full .split-label{ max-width:none; }
.dw-head-full .split-content{ max-width:none; margin-top:18px; }
.dw-head-full .lead{ max-width:none; }
.dw-when{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.dw-when li{ display:grid; grid-template-columns:36px 1fr; align-content:start; column-gap:16px; row-gap:6px; padding:26px 24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.dw-when-i{ grid-row:1 / 3; width:36px; height:36px; border-radius:50%; background:rgba(236,72,153,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec4899' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/17px no-repeat; border:1px solid rgba(236,72,153,.4); }
.dw-when h3{ margin-top:6px; font-family:var(--ff-head); font-size:18px; font-weight:600; color:var(--text); }
.dw-when p{ font-size:15px; line-height:1.6; color:var(--text-dim); }

/* ---------- Tu web, conectada con el resto de servicios: 5 tarjetas con enlace ---------- */
.dw-links{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.dw-links a{
  display:flex; flex-direction:column; gap:10px; height:100%; padding:24px 22px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 55%), var(--panel);
  text-decoration:none; transition:border-color .2s ease, transform .2s ease;
}
.dw-links a:hover{ border-color:color-mix(in srgb, var(--c) 55%, transparent); transform:translateY(-3px); }
.dw-links a:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.dw-links-dot{ width:11px; height:11px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); }
.dw-links h3{ margin-top:6px; font-family:var(--ff-head); font-size:17px; font-weight:600; color:var(--text); }
.dw-links p{ flex:1; font-size:14.5px; line-height:1.6; color:var(--text-dim); }
.dw-links-go{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-head); font-size:14px; font-weight:600; color:var(--c); }
.dw-links-go::after{ content:"→"; transition:transform .2s ease; }
.dw-links a:hover .dw-links-go::after{ transform:translateX(3px); }

@media (max-width:1100px){
  .dw-links{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:980px){
  .dw-when{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .dw-when, .dw-links{ grid-template-columns:1fr; }
  .dw-when li{ padding:20px 18px; }
  .dw-links a{ padding:20px 18px; }
}

/* ---------- Color fucsia de la página ---------- */
.sv-page:has(.sv-hero--web){
  --ice-1:#ec4899; --ice-2:#db2777; --ice-3:#fbcfe8;
  --ice-grad:linear-gradient(135deg, #fce7f3 0%, #f472b6 50%, #be185d 100%);
}
.sv-page:has(.sv-hero--web) .btn{
  --ice-1:#22d3ee; --ice-2:#3b82f6; --ice-3:#a8e9ff;
  --ice-grad:linear-gradient(135deg, #7fe7ff 0%, #2f8fef 100%);
}
.sv-page:has(.sv-hero--web) .page-hero{
  background:
    radial-gradient(ellipse 55% 110% at 88% -10%, rgba(236,72,153,.09), transparent 62%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(190,24,93,.06), transparent 70%),
    var(--bg);
}
.sv-page:has(.sv-hero--web) .page-hero-glow{ background:radial-gradient(circle, rgba(236,72,153,.11), transparent 65%); }
.sv-page:has(.sv-hero--web) .sv-cta-note a{ text-decoration-color:rgba(236,72,153,.5); }
.sv-page:has(.sv-hero--web) .cta-box{
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(236,72,153,.09), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--bg-alt));
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .dw-types{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:980px){
  .dw-views{ grid-template-columns:1fr; }
  .dw-view--google{ border-left:0; border-top:1px solid var(--border); }
  .dw-view{ padding:30px 28px; }
  .dw-steps{ grid-template-columns:1fr; gap:0; }
  .dw-steps::before{ top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, #ec4899, rgba(236,72,153,.15)); }
  .dw-steps li{ display:grid; grid-template-columns:56px 1fr; column-gap:22px; padding-bottom:26px; }
  .dw-step-n{ grid-row:1 / 3; }
  .dw-steps h3{ margin-top:10px; }
  .dw-quote{ grid-template-columns:1fr; }
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .dw-types{ grid-template-columns:1fr; }
  .dw-type{ display:grid; grid-template-columns:96px 1fr; column-gap:18px; row-gap:4px; padding:18px; }
  .dw-thumb{ grid-row:1 / 3; height:72px; padding:7px; gap:4px; }
  .dw-type h3{ margin-top:0; font-size:17px; }
  .dw-view{ padding:26px 22px; }
  .dw-quote-main, .dw-quote-extra{ padding:28px 24px; }
  .dw-quote-t{ font-size:23px; }
  .dw-steps h3{ font-size:21px; }
  .dw-faq summary{ font-size:16px; padding:18px 48px 18px 18px; }
  .dw-faq details p{ padding:0 18px 18px; }
}

/* ==========================================================================
   SOBRE NOSOTROS: cabecera con constelaciones, nuestra historia y el porqué del nombre,
   datos reales, compromisos, equipo, oficinas, testimonios. Color de marca (hielo). Todo se ve sin script.
   ========================================================================== */

/* ---------- Cabecera: constelaciones de fondo, texto a lo ancho, título en una línea ---------- */
.sv-hero--sn{ padding:170px 0 110px; }
.sn-hero{ position:relative; z-index:2; }
.sv-hero--sn .page-title{ max-width:none; font-size:clamp(40px, 4.2vw, 56px); line-height:1.08; letter-spacing:-.015em; }
.sv-hero--sn .page-title .sn-brand{ background:var(--ice-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sv-hero--sn .page-intro{ max-width:none; margin-top:26px; font-size:clamp(17px, 1.45vw, 20px); line-height:1.6; color:var(--text); }
.sn-hero-services{ margin-top:16px; font-size:16px; line-height:1.75; color:var(--text-dim); }
.sn-hero-services a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:2px; text-underline-offset:4px; transition:color .2s ease; }
.sn-hero-services a:hover, .sn-hero-services a:focus-visible{ color:var(--c); }
.sv-hero--sn .sv-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
/* Botón de servicios: secundario en azul hielo (el de presupuesto sigue siendo el principal) */
.sn-btn-services{ border:1.5px solid rgba(34,211,238,.6); background:rgba(34,211,238,.06); color:var(--ice-3); }
.sn-btn-services i{ font-style:normal; transition:transform .25s ease; }
.sn-btn-services:hover, .sn-btn-services:focus{ color:var(--ice-3); }
.sn-btn-services:hover{ border-color:var(--ice-1); background:rgba(34,211,238,.12); box-shadow:0 10px 30px -10px rgba(34,211,238,.5); }
.sn-btn-services:hover i, .sn-btn-services:focus-visible i{ transform:translateX(4px); }
@media (max-width:640px){
  .sv-hero--sn{ padding:130px 0 72px; }
  .sv-hero--sn .page-intro{ margin-top:20px; }
  .sn-hero-services{ font-size:15px; }
  .sv-hero--sn .sv-hero-actions{ gap:12px; }
  .sv-hero--sn .sv-hero-actions .btn{ width:100%; justify-content:center; }
}

/* ---------- Nuestra historia + el porqué del nombre + datos ---------- */
.sn-story{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr); gap:64px; align-items:center; }
.sn-story-text .h2{ display:block; margin:14px 0 18px; text-wrap:balance; }
.sn-story-text .lead{ max-width:none; }
.sn-story-text .lead + .lead{ margin-top:14px; }
.sn-name{
  position:relative; display:grid; gap:12px; padding:34px 34px 36px; border-radius:var(--radius-md); overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 100% 0%, rgba(34,211,238,.14), transparent 70%), var(--panel-2); border:1px solid rgba(34,211,238,.35);
}
.sn-name-icon{ width:54px; height:44px; background:linear-gradient(135deg, #7fe7ff, #2f8fef); -webkit-mask:url("../img/logo-simbolo.png") center / contain no-repeat; mask:url("../img/logo-simbolo.png") center / contain no-repeat; }  /* 1.30.0: el símbolo de ArctikSEO */
.sn-name-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#a8e9ff; }
.sn-name p{ font-family:var(--ff-serif); font-size:21px; font-weight:500; line-height:1.45; color:var(--text); }

/* ---------- Cómo trabajamos: seis compromisos en tarjetas iguales ---------- */
.sn-promise{ display:block; }
.sn-promise-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.sn-promise-list li, .sn-promise-card{ display:grid; grid-template-columns:44px 1fr; column-gap:16px; row-gap:6px; align-content:start; padding:24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.sn-promise-list h3{ margin-top:4px; font-family:var(--ff-head); font-size:17px; font-weight:600; color:var(--text); }
.sn-promise-list p{ grid-column:2; font-size:14.5px; line-height:1.6; color:var(--text-dim); }
/* icono: la clase sn-ico--… guarda el dibujo en --ico; lo pinta el span .sn-ico (estructura antigua)
   o el ::before de la tarjeta .sn-promise-card (bloques editables: la tarjeta lleva la clase del icono) */
.sn-ico, .sn-promise-card::before{ grid-row:1 / 3; width:44px; height:44px; border-radius:12px; background:rgba(34,211,238,.1) center/22px no-repeat; background-image:var(--ico); border:1px solid rgba(34,211,238,.3); }
.sn-promise-card::before{ content:""; box-sizing:border-box; }
.sn-ico--person{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.sn-ico--report{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 17v-3M12 17V9M16 17v-6'/%3E%3C/svg%3E"); }
.sn-ico--meet{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sn-ico--advice{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.sn-ico--clock{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.sn-ico--check{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }

/* ---------- El equipo: fotos en blanco y negro (color al pasar el ratón) ---------- */
.sn-team{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.sn-member{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); transition:border-color .25s ease, transform .25s ease; }
.sn-member:hover{ border-color:rgba(34,211,238,.45); transform:translateY(-3px); }
/* la foto es un bloque Imagen de WordPress (figure.wp-block-image): se anula su margen y su alto automático */
.sn-team .sn-photo{ display:block; margin:0; aspect-ratio:4 / 4.4; overflow:hidden; background:var(--bg-alt); }
.sn-team .sn-photo img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 30%; filter:grayscale(1) contrast(1.05) brightness(.95); transition:filter .4s ease, transform .4s ease; }
/* encuadre: si la cara queda cortada, en WordPress se añade a la imagen la clase sn-foco-izq o sn-foco-der */
.sn-team .sn-foco-izq img{ object-position:25% 30%; }
.sn-team .sn-foco-der img{ object-position:75% 30%; }
.sn-member:hover .sn-photo img{ filter:none; transform:scale(1.03); }
.sn-team h3{ margin:22px 24px 0; font-family:var(--ff-serif); font-size:24px; font-weight:600; color:var(--text); }
.sn-role{ margin:6px 24px 0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#a8e9ff; }
.sn-team p{ margin:14px 24px 26px; font-size:14.5px; line-height:1.65; color:var(--text-dim); }

/* ---------- Dónde estamos: teléfono y correo como botones (grandes y fáciles de pulsar en el móvil) ---------- */
.sn-cbtns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.sn-cbtn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px 12px 16px; border-radius:var(--radius-pill); white-space:nowrap;
  border:1.5px solid rgba(34,211,238,.45); background:rgba(34,211,238,.06); color:var(--ice-3);
  font-family:var(--ff-head); font-size:15px; font-weight:600; text-decoration:none; transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.sn-cbtn::before{ content:""; flex:none; width:18px; height:18px; background:center/contain no-repeat; }
.sn-cbtn--tel::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.sn-cbtn--mail::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.sn-cbtn:hover, .sn-cbtn:focus{ border-color:var(--ice-1); background:rgba(34,211,238,.13); color:var(--text); }
.sn-cbtn:focus-visible{ outline:2px solid var(--ice-1); outline-offset:3px; }

@media (max-width:640px){
  .sn-cbtn{ flex:1 1 100%; justify-content:center; }
}

/* ---------- Oficinas: una tarjeta por oficina (se añaden más duplicando la tarjeta en WordPress) ---------- */
.sn-offices{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:18px; }
.sn-office{
  position:relative; display:grid; gap:8px; align-content:start; padding:36px 40px 38px; border-radius:var(--radius-md);
  background:radial-gradient(ellipse 60% 80% at 100% 0%, rgba(34,211,238,.1), transparent 70%), var(--panel); border:1px solid var(--border);
  transition:border-color .25s ease, transform .25s ease;
}
.sn-office:hover{ border-color:rgba(34,211,238,.5); transform:translateY(-3px); }
.sn-office:focus-within{ outline:2px solid #22d3ee; outline-offset:2px; }
/* chincheta dibujada con CSS: no hace falta añadirla al duplicar la tarjeta */
.sn-office::before{ content:""; position:absolute; right:36px; top:34px; width:40px; height:40px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.sn-office p, .sn-office h3{ margin:0; }
.sn-office-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim-2); }
.sn-office-city{ font-family:var(--ff-serif); font-size:44px; font-weight:600; line-height:1.05; color:var(--text); }
.sn-office-addr{ font-size:16px; color:var(--text-dim); }
.sn-office-go{ display:inline-flex; align-items:center; justify-self:start; gap:8px; margin-top:12px; font-family:var(--ff-head); font-size:14.5px; font-weight:600; color:#22d3ee; text-decoration:none; }
.sn-office-go:hover, .sn-office-go:focus{ color:#22d3ee; outline:0; }
/* toda la tarjeta se puede pulsar: el enlace se extiende por encima de ella */
.sn-office-go::before{ content:""; position:absolute; inset:0; border-radius:inherit; }
.sn-office-go::after{ content:"→"; transition:transform .2s ease; }
.sn-office:hover .sn-office-go::after{ transform:translateX(3px); }

/* ---------- Testimonios ---------- */
.sn-quotes-head{ max-width:760px; margin-bottom:40px; }
.sn-quotes-head .h2{ display:block; margin-top:14px; text-wrap:balance; }
/* Slider de opiniones: fila que se desliza y encaja sola (sin script); js-sn.js añade flechas y puntos */
.sn-quotes{
  --gap:18px; display:flex; gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px; border-radius:var(--radius-md);
}
.sn-quotes::-webkit-scrollbar{ display:none; }
.sn-quotes:focus-visible{ outline:2px solid #22d3ee; outline-offset:4px; }
.sn-quote{ flex:0 0 calc((100% - var(--gap)) / 2.15); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; gap:28px; margin:0; padding:40px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); }
.sn-quote-text{ position:relative; margin:0; padding:34px 0 0; font-family:var(--ff-serif); font-size:18px; font-weight:500; line-height:1.55; color:var(--text); }
.sn-quote-text::before{ content:"“"; position:absolute; left:-2px; top:-18px; font-family:var(--ff-serif); font-size:72px; line-height:1; color:#22d3ee; }
.sn-quote-by{ display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid var(--border); }
.sn-quote-who{ display:grid; gap:2px; }
.sn-quote-who p{ margin:0; }
.sn-quote-name{ font-family:var(--ff-head); font-size:16px; font-weight:600; color:var(--text); }
.sn-quote-role{ font-size:14px; color:var(--text-dim); }
.sn-avatar{ flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; font-family:var(--ff-head); font-weight:700; font-size:15px; color:#04121c; background:var(--ice-grad); }

/* textos pendientes de Dani: se ven en ámbar para que no se olviden (no deben llegar a WordPress) */
.sn-pending{ color:#fbbf24 !important; font-style:italic; }

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .sn-team{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:980px){
  .sn-story{ grid-template-columns:1fr; gap:36px; }
  .sn-promise-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sn-quote{ flex-basis:80%; }
}
/* ---------- Móvil ---------- */
@media (max-width:640px){
  .sn-name{ padding:26px 24px 28px; }
  .sn-name p{ font-size:19px; }
  .sn-promise-list{ grid-template-columns:1fr; }
  .sn-promise-list li, .sn-promise-card{ padding:20px 18px; }
  .sn-team{ grid-template-columns:1fr; }
  .sn-team .sn-photo{ aspect-ratio:4 / 3.2; }
  .sn-office{ padding:28px 26px 30px; }
  .sn-office-city{ font-size:36px; }
  .sn-office::before{ right:24px; top:26px; width:32px; height:32px; }
  .sn-quote{ padding:28px 24px; }
  .sn-quote-text{ font-size:16px; }
}


/* Cifras de la historia: el bloque de la portada (.stats-bar), con menos aire arriba */
.sn-stats{ margin-top:64px; padding-bottom:0; }
@media (max-width:640px){ .sn-stats{ margin-top:44px; } }

/* Flechas del slider (las crea js-sn.js; sin script no aparecen y las tarjetas se deslizan igual) */
.sn-slider{ position:relative; }
.sn-slider-btn{
  display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(6,10,17,.72); color:var(--text-dim);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .2s ease, color .2s ease, opacity .25s ease, visibility .25s;
}
.sn-slider-btn:hover, .sn-slider-btn:focus, .sn-slider-btn:active{ background:rgba(6,10,17,.72); color:var(--text-dim); }
.sn-slider-btn:hover:not(:disabled), .sn-slider-btn:focus-visible{ border-color:rgba(34,211,238,.6); color:var(--ice-3); outline:none; }
.sn-slider-btn:disabled{ opacity:0; visibility:hidden; }
/* una flecha a cada lado, a media altura de las tarjetas */
.sn-slider-side .sn-slider-btn{ position:absolute; top:50%; z-index:2; transform:translateY(-50%); }
.sn-slider-side .sn-prev{ left:-22px; }
.sn-slider-side .sn-next{ right:-22px; }
.sn-slider.no-nav .sn-slider-side{ display:none; }
/* difuminado a la derecha mientras quedan opiniones por ver (solo con el slider activo) */
.sn-quotes.is-slider{ --fl:#000; --fr:transparent; --fw:56px; -webkit-mask-image:linear-gradient(90deg, var(--fl), #000 var(--fw), #000 82%, var(--fr)); mask-image:linear-gradient(90deg, var(--fl), #000 var(--fw), #000 82%, var(--fr)); }
.sn-quotes.is-slider:not(.at-start){ --fl:transparent; }
.sn-quotes.is-slider.at-end{ --fr:#000; }
@media (max-width:640px){
  .sn-quote{ flex-basis:88%; }
  .sn-quotes.is-slider:not(.at-start){ --fl:#000; }
  /* en móvil: las dos flechas debajo de las tarjetas, centradas, para no tapar el texto */
  .sn-slider-side{ display:flex; justify-content:center; gap:12px; margin-top:20px; }
  .sn-slider-side .sn-slider-btn{ position:static; transform:none; }
  .sn-slider-side .sn-slider-btn:disabled{ opacity:.35; visibility:visible; cursor:default; }
}

/* ---------- 1.11.0 · Preguntas frecuentes de Diseño web, Content marketing y Paid media ----------
   Misma maqueta que PR digital, SEO y GEO (título a la izquierda, preguntas a la derecha hasta el borde
   del contenedor); cada página conserva su propio estilo de preguntas. Solo CSS: el contenido no cambia. */
.container:has(> .dw-faq-head), .container:has(> .cm-faq-head), .container:has(> .sem-faq-head){
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:64px; align-items:start;
}
.dw-faq-head, .cm-faq-head, .sem-faq-head{ max-width:none; margin-bottom:0; position:sticky; top:120px; }
.dw-faq-head .h2, .cm-faq-head .h2, .sem-faq-head .h2{ margin-top:0; }
.dw-faq, .cm-faq, .sem-faq{ max-width:none; }
@media (max-width: 980px){
  .container:has(> .dw-faq-head), .container:has(> .cm-faq-head), .container:has(> .sem-faq-head){ grid-template-columns:1fr; gap:40px; }
  .dw-faq-head, .cm-faq-head, .sem-faq-head{ position:static; }
}

/* ==========================================================================
   SERVICIOS (página agrupadora): cabecera, lista de servicios, combinaciones
   ========================================================================== */
.hub-seo{ --c:#22d3ee; } .hub-geo{ --c:#c084fc; } .hub-pr{ --c:#fbbf24; }
.hub-cm{ --c:#34d399; } .hub-sem{ --c:#ff8a65; } .hub-dw{ --c:#ec4899; }

.sv-hero--hub{ padding:150px 0 96px; }
.sv-hero--hub .page-title{ max-width:none; font-size:clamp(36px, 4.6vw, 56px); }
.hub-brand{ background:var(--ice-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sv-hero--hub .page-intro{ max-width:600px; }

/* --- C: constelación de servicios (sobre la red de puntos) --- */
.hub-hero-c{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; position:relative; z-index:2; }
.hub-hero-c .hub-brand{ white-space:nowrap; }
.hub-sky{ position:relative; width:100%; aspect-ratio:5/4; }
.hub-sky-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hub-sky-lines polyline, .hub-sky-lines line{ fill:none; stroke:rgba(168,233,255,.42); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.hub-sky-lines line{ stroke-dasharray:4 5; stroke:rgba(168,233,255,.26); }
.hub-star{
  position:absolute; left:var(--x); top:var(--y); width:0; height:0;
  color:var(--text); font-family:var(--ff-head); font-size:14px; font-weight:600;
}
.hub-star i{
  position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle, #fff 0 22%, var(--c) 48%);
  box-shadow:0 0 12px 2px var(--c), 0 0 32px 6px color-mix(in srgb, var(--c) 35%, transparent);
  animation:hub-twinkle 4s ease-in-out infinite;
}
.hub-star i::before, .hub-star i::after{   /* destello en cruz */
  content:""; position:absolute; left:50%; top:50%; width:34px; height:1px; transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, #fff), transparent);
}
.hub-star i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.hub-star:nth-child(3n) i{ animation-delay:-1s; } .hub-star:nth-child(3n+1) i{ animation-delay:-2.2s; }
.hub-star:nth-child(4n) i{ animation-delay:-.6s; } .hub-star:nth-child(5n) i{ animation-delay:-3.1s; }
@keyframes hub-twinkle{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.75; transform:scale(.82); } }
.hub-star span{
  position:absolute; left:0; top:16px; transform:translateX(-50%); white-space:nowrap;
  padding:3px 10px; border-radius:var(--radius-pill); background:rgba(6,10,17,.7);
  border:1px solid transparent; transition:border-color .2s ease, color .2s ease;
}
.hub-star.is-up span{ top:auto; bottom:16px; }               /* escalón alto: nombre encima; bajo: debajo */
.hub-star.is-start span{ transform:translateX(-18%); }       /* extremos: el nombre no se sale por los lados */
.hub-star.is-end span{ transform:translateX(-82%); }
.hub-star::before{ content:""; position:absolute; left:-24px; top:-24px; width:48px; height:72px; }
.hub-star.is-up::before{ top:-48px; }  /* zona de clic cómoda */
.hub-star:hover span, .hub-star:focus-visible span{ color:var(--text); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.hub-star:hover i{ animation-play-state:paused; transform:scale(1.25); }
.hub-star:focus-visible{ outline:none; }
.hub-star:focus-visible span{ outline:2px solid var(--c); outline-offset:2px; }

/* --- Lista de servicios (tarjetas) --- */
.hub-list{ margin-top:48px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; counter-reset:hub; }
.hub-item:last-child:nth-child(odd){ grid-column:1 / -1; }   /* número impar de servicios: el último ocupa todo el ancho */
.hub-item{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:30px 30px 26px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.hub-item::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--c), transparent 80%); }
.hub-item:hover{ border-color:color-mix(in srgb, var(--c) 40%, transparent); transform:translateY(-2px); }
.hub-item{ counter-increment:hub; }
.hub-main::before{ content:counter(hub, decimal-leading-zero); display:block; margin-bottom:18px; font-family:var(--ff-mono); font-size:13px; color:var(--c); }  /* número automático */
.hub-main h3{ margin:0; font-family:var(--ff-serif); font-size:clamp(24px,2.3vw,30px); font-weight:600; line-height:1.15; letter-spacing:-.01em; }
.hub-main h3 a{ color:var(--text); }
.hub-main h3 a::after{ content:""; position:absolute; inset:0; }  /* toda la tarjeta es el enlace */
.hub-main h3 a:focus-visible{ outline:none; }
.hub-item:has(h3 a:focus-visible){ outline:2px solid var(--c); outline-offset:3px; }
.hub-main p{ margin:10px 0 0; color:var(--text-dim); font-size:16px; line-height:1.6; }
.hub-inc{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hub-inc li{
  padding:5px 12px; border-radius:var(--radius-pill); font-size:13px; line-height:1.4; color:var(--text-body);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent); background:color-mix(in srgb, var(--c) 5%, transparent);
}
.hub-go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; font-size:14px; font-weight:600; color:var(--c); }
.hub-go::after{ content:"→"; transition:transform .25s ease; }
.hub-item:hover .hub-go::after{ transform:translateX(3px); }

/* --- Cifras del mercado --- */
.hub-stats-sec{ background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:64px 64px; }
.hub-stats{ margin-top:48px; display:grid; grid-template-columns:1fr; gap:16px; }
/* el número de columnas se adapta a cuántas cifras haya */
@media (min-width:1025px){
  .hub-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }                         /* 4 (o 7 y más) */
  .hub-stats:has(> :nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-stats:has(> :nth-child(3):last-child),
  .hub-stats:has(> :nth-child(6):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hub-stats:has(> :nth-child(5):last-child){ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .hub-stats:has(> :nth-child(5):last-child) .hub-stat{ padding:26px 20px 22px; }
  .hub-stats:has(> :nth-child(5):last-child) .hub-stat-num{ font-size:clamp(24px,2vw,28px); }
}
@media (min-width:768px) and (max-width:1024px){
  .hub-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-stats:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hub-stat:last-child:nth-child(odd):not(:nth-child(3)){ grid-column:1 / -1; }      /* impar: la última a todo el ancho */
}
.hub-stat{ position:relative; display:flex; flex-direction:column; padding:30px 26px 24px; background:var(--panel); border:1px solid var(--border); transition:border-color .25s ease, background .25s ease; }
.hub-stat::before, .hub-stat::after{ content:""; position:absolute; width:16px; height:16px; border:2px solid var(--c); opacity:0; transition:opacity .25s ease; }
.hub-stat::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.hub-stat::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
.hub-stat:hover{ border-color:color-mix(in srgb, var(--c) 35%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, var(--panel)), var(--panel) 60%); }
.hub-stat:hover::before, .hub-stat:hover::after{ opacity:1; }
.hub-stat-num{ margin:0 0 14px; font-family:var(--ff-head); font-size:clamp(30px,2.5vw,36px); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--c); }
.hub-stat-txt{ margin:0; color:var(--text-body, var(--text-dim)); font-size:15.5px; line-height:1.6; }
.hub-stat-src{ margin:auto 0 0; padding-top:18px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.02em; color:var(--text-dim-2); }
.hub-stat-src a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.25); }
.hub-stat-src a:hover, .hub-stat-src a:focus{ color:var(--text); }

/* --- Trabajo conjunto: 4 pasos unidos por una línea --- */
.hub-steps-head{ max-width:760px; margin:0 auto; text-align:center; }
.hub-steps-head .h2{ display:block; margin-top:14px; }
.hub-steps-head .lead{ margin:18px auto 0; max-width:640px; }
.hub-steps{ margin-top:64px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; counter-reset:paso; }
.hub-step{ position:relative; counter-increment:paso; padding-top:84px; }
.hub-step::before{   /* número automático en un círculo */
  content:counter(paso, decimal-leading-zero); position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; font-family:var(--ff-head); font-size:14px; font-weight:700; color:var(--ice-1);
  border:1px solid rgba(34,211,238,.6); background:radial-gradient(circle, rgba(34,211,238,.14), rgba(34,211,238,.04)); box-shadow:0 0 0 6px rgba(34,211,238,.05);
}
.hub-step:not(:last-child)::after{   /* línea hasta el siguiente paso */
  content:""; position:absolute; top:26px; left:64px; right:-20px; height:1px; background:linear-gradient(90deg, rgba(34,211,238,.6), rgba(34,211,238,.25));
}
.hub-step h3{ margin:0; font-family:var(--ff-head); font-size:19px; font-weight:600; line-height:1.3; color:var(--text); }
.hub-step h3::before{   /* icono según la clase del paso */
  content:""; display:block; width:44px; height:44px; margin-bottom:18px; border-radius:10px; border:1px solid var(--border);
  background:rgba(34,211,238,.06) no-repeat center / 22px 22px;
}
.hub-step p{ margin:10px 0 0; color:var(--text-dim); font-size:15.5px; line-height:1.6; }
.hub-step--lupa h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.hub-step--plan h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.hub-step--equipo h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14c2.5 0 4.5 2 4.5 4.5'/%3E%3C/svg%3E"); }
.hub-step--grafico h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }

/* --- Responsive --- */
@media (max-width:1024px){
  .hub-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:48px; }
  .hub-step:nth-child(2n)::after{ display:none; }
  .hub-hero-c{ grid-template-columns:1fr; gap:24px; }
  .hub-sky{ max-width:560px; justify-self:center; }
}
@media (max-width:767px){
  .hub-sky{ aspect-ratio:1/1; margin-top:8px; }
  .hub-star{ font-size:13px; }
  .sv-hero--hub{ padding:120px 0 64px; }
  .hub-list{ grid-template-columns:1fr; }
  .hub-item{ padding:24px 22px 22px; }
  .hub-stats{ gap:12px; }
  .hub-stat{ padding:24px 22px 20px; }
  .hub-steps-head{ text-align:left; }
  .hub-steps-head .lead{ margin-left:0; }
  .hub-steps{ grid-template-columns:1fr; gap:0; margin-top:44px; }
  .hub-step{ padding:0 0 36px 76px; }
  .hub-step:last-child{ padding-bottom:0; }
  .hub-step:not(:last-child)::after{ display:block; top:60px; bottom:6px; left:26px; right:auto; width:1px; height:auto; background:linear-gradient(180deg, rgba(34,211,238,.6), rgba(34,211,238,.2)); }
  .hub-step h3::before{ width:40px; height:40px; margin-bottom:14px; }
}
@media (prefers-reduced-motion:reduce){ .hub-star i{ animation:none; } }

/* --- Trabajo conjunto: pasos centrados en PC y tablet (en móvil, línea vertical a la izquierda) --- */
@media (min-width:768px){
  .hub-step{ text-align:center; }
  .hub-step::before{ left:50%; transform:translateX(-50%); }
  .hub-step:not(:last-child)::after{ left:calc(50% + 38px); right:calc(-50% + 6px); }
  .hub-step h3::before{ margin-left:auto; margin-right:auto; }
  .hub-step p{ max-width:270px; margin-left:auto; margin-right:auto; }
}

/* ============ CASOS DE ÉXITO (página agrupadora) ============ */
/* Tarjetas del shortcode [arctik_casos]: el tema pone --c con el color del servicio (Apariencia → Menús). */

.cs-list-section{ padding-top:72px; }

/* Etiqueta de servicio: punto de color + nombre corto (como en el menú) */
.cs-svc{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim);
}
.cs-svc::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c, var(--ice-1)); box-shadow:0 0 10px var(--c, var(--ice-1)); }

/* uno o dos servicios por caso (el primero manda el color de la tarjeta) */
.cs-svcs{ display:inline-flex; flex-wrap:wrap; gap:6px 16px; }

.cs-metric{
  font-family:var(--ff-head); font-weight:700; line-height:1; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums; color:var(--c, var(--ice-1)); white-space:nowrap;
}
.cs-metric-label{ font-size:15px; font-weight:600; color:var(--text); }
.cs-text{ font-size:15px; line-height:1.65; color:var(--text-dim); }

/* ---------- Tarjetas ---------- */
.cs-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.cs-grid--dos{ grid-template-columns:repeat(2, minmax(0,1fr)); }            /* 2 o 4 casos */
.cs-grid--ultima-ancha > :last-child{ grid-column:1 / -1; }               /* 1, 7, 10… casos */
.cs-card{
  position:relative; display:flex; flex-direction:column; gap:0;
  padding:32px 32px 28px; border:1px solid var(--border); background:rgba(14,22,33,.45);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
/* esquinas finas del color del servicio (mismo gesto que la portada) */
.cs-card::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    linear-gradient(var(--c),var(--c)) top left/12px 1px, linear-gradient(var(--c),var(--c)) top left/1px 12px,
    linear-gradient(var(--c),var(--c)) top right/12px 1px, linear-gradient(var(--c),var(--c)) top right/1px 12px,
    linear-gradient(var(--c),var(--c)) bottom left/12px 1px, linear-gradient(var(--c),var(--c)) bottom left/1px 12px,
    linear-gradient(var(--c),var(--c)) bottom right/12px 1px, linear-gradient(var(--c),var(--c)) bottom right/1px 12px;
  background-repeat:no-repeat; opacity:.55; transition:opacity .2s ease;
}
.cs-card:hover, .cs-card:focus-within{ background:rgba(14,22,33,.8); border-color:color-mix(in srgb, var(--c) 30%, transparent); transform:translateY(-4px); }
.cs-card:hover::before, .cs-card:focus-within::before{ opacity:1; }
.cs-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.cs-card-arrow{ width:16px; height:16px; color:var(--text-dim); transition:color .2s ease, transform .2s ease;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; }
.cs-card:hover .cs-card-arrow, .cs-card:focus-within .cs-card-arrow{ color:var(--c); transform:translate(2px,-2px); }
.cs-card .cs-metric{ font-size:clamp(48px,5vw,64px); }
.cs-card .cs-metric-label{ margin-top:10px; }
.cs-client{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border);
  font-family:var(--ff-head); font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-.01em; text-transform:none;
}
.cs-client a{ color:var(--text); text-decoration:none; }
.cs-client a:hover, .cs-client a:focus{ color:var(--text); }
.cs-client a::after{ content:""; position:absolute; inset:0; z-index:1; }   /* toda la tarjeta es clicable */
.cs-client a:focus-visible{ outline:none; }
.cs-card:has(.cs-client a:focus-visible){ outline:2px solid var(--c); outline-offset:3px; }
.cs-card .cs-text{ margin-top:10px; margin-bottom:24px; font-size:14px; }
.cs-more{
  margin-top:auto; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c);
}

@media (max-width:1024px){
  .cs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cs-grid > :last-child:nth-child(odd){ grid-column:1 / -1; }               /* impar: la última a todo el ancho */
  .cs-grid--ultima-ancha > :last-child:nth-child(even){ grid-column:auto; }
}
@media (max-width:768px){
  .cs-list-section{ padding-top:48px; }
  .cs-grid{ grid-template-columns:1fr; }
  .cs-card{ padding:28px 24px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .cs-card{ transition:none; }
  .cs-card:hover, .cs-card:focus-within{ transform:none; }
}

/* ---------- 1.18.0 ---------- */
/* =====================================================================
   CONTACTO: cabecera, pasos, tarjeta del formulario (WPForms con el estilo de la web), formas de contacto
   ===================================================================== */

/* ---------- Cabecera en dos columnas (texto + formulario) ---------- */
.ct-hero--split .page-hero-inner{ max-width:none; }
.ct-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.ct-split-text .page-intro{ max-width:520px; }

/* ---------- Pasos: qué pasa después de escribirnos ---------- */
.ct-steps{ margin:36px 0 0; display:grid; gap:20px; counter-reset:ct; }
.ct-step{ position:relative; margin:0; padding-left:56px; counter-increment:ct; }
.ct-step::before{
  content:counter(ct, decimal-leading-zero); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(34,211,238,.45); background:rgba(34,211,238,.06);
  font-family:var(--ff-mono); font-size:12px; color:var(--ice-1);
}
.ct-steps .ct-step-t{ margin:0; font-family:var(--ff-head); font-size:17px; font-weight:600; line-height:1.3; color:var(--text); }
.ct-steps p{ margin:4px 0 0; font-size:15.5px; line-height:1.55; color:var(--text-dim); }

/* ---------- Tarjeta del formulario ---------- */
.ct-form-card{
  position:relative; padding:36px 36px 30px; border-radius:var(--radius-lg);
  background:radial-gradient(ellipse 70% 60% at 100% 0%, rgba(34,211,238,.1), transparent 70%), var(--panel);
  border:1px solid var(--border); box-shadow:0 30px 80px -40px rgba(0,0,0,.8);
}
.ct-form-k{ margin:0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim-2); }
.ct-form-t{ margin:6px 0 8px; font-family:var(--ff-serif); font-size:34px; font-weight:600; line-height:1.1; color:var(--text); }
.ct-legal{ margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--text-dim-2); }
.ct-legal a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.ct-legal a:hover, .ct-legal a:focus{ color:var(--ice-1); }

/* WPForms (formulario real, sin tocar sus campos): colores y medidas de la web.
   !important: WPForms escribe sus propias variables en #wpforms-<id> al guardar el formulario */
.ct-form-card .wpforms-container{
  --wpforms-field-background-color: rgba(255,255,255,.04) !important;
  --wpforms-field-border-color: rgba(255,255,255,.14) !important;
  --wpforms-field-border-color-spare: rgba(255,255,255,.14) !important;
  --wpforms-field-text-color: #f2f8fc !important;
  --wpforms-field-menu-color: #0e1621 !important;   /* fondo de la lista del desplegable (WPForms la pone blanca) */
  --wpforms-field-border-radius: 12px !important;
  --wpforms-field-size-input-height: 50px !important;
  --wpforms-field-size-font-size: 16px !important;
  --wpforms-label-color: #f2f8fc !important;
  --wpforms-label-sublabel-color: #93a7bd !important;
  --wpforms-label-error-color: #fb7185 !important;
  --wpforms-label-size-font-size: 15px !important;
  --wpforms-label-size-sublabel-font-size: 13px !important;
  --wpforms-button-background-color: #22d3ee !important;
  --wpforms-button-text-color: #04121c !important;
  --wpforms-button-border-radius: 999px !important;
  --wpforms-button-size-height: 54px !important;
  --wpforms-button-size-font-size: 16px !important;
  --wpforms-button-size-padding-h: 30px !important;
  margin:18px 0 0 !important;
}
.ct-form-card .wpforms-container .wpforms-field{ padding:10px 0 !important; }
/* campos a todo el ancho de la tarjeta (WPForms los pone al 60 %) */
.ct-form-card .wpforms-container .wpforms-field-medium{ max-width:100% !important; }
.ct-form-card .wpforms-container .wpforms-field-label{ font-family:var(--ff-head); font-weight:600 !important; }
.ct-form-card .wpforms-container input, .ct-form-card .wpforms-container textarea, .ct-form-card .wpforms-container select{ font-family:var(--ff-body) !important; }
.ct-form-card .wpforms-container input:focus, .ct-form-card .wpforms-container textarea:focus{
  border-color:var(--ice-1) !important; box-shadow:0 0 0 1px var(--ice-1) !important; outline:0;
}
/* desplegable: mismo fondo oscuro, opciones legibles */
.ct-form-card .wpforms-container select option{ background:#0e1621; color:#f2f8fc; }
.ct-form-card .wpforms-container textarea.wpforms-field-medium{ height:140px !important; }
.ct-form-card .wpforms-container .wpforms-submit-container{ margin-top:14px !important; }
.ct-form-card .wpforms-container button.wpforms-submit{
  width:100%; font-family:var(--ff-head) !important; font-weight:700 !important; letter-spacing:.01em;
  background:var(--ice-grad) !important; transition:filter .2s ease, transform .2s ease;
}
.ct-form-card .wpforms-container button.wpforms-submit:hover,
.ct-form-card .wpforms-container button.wpforms-submit:focus{ filter:brightness(1.08); transform:translateY(-1px); color:#04121c !important; }
.ct-form-card .wpforms-container button.wpforms-submit:focus-visible{ outline:2px solid var(--ice-1); outline-offset:3px; }

/* ---------- Oficinas: mismas tarjetas que Sobre nosotros ---------- */
.ct-offices-section .section-head{ margin-bottom:40px; max-width:none; }
.ct-offices-section .eyebrow{ display:block; margin-bottom:12px; font-size:14px; }
.ct-offices-section .h2{ display:block; letter-spacing:0; }
.ct-offices-section .lead{ max-width:none; }
@media (max-width:980px){ .ct-offices-section .lead br{ display:none; } }

/* ---------- Tablet y móvil ---------- */
@media (max-width:980px){
  .ct-split{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:640px){
  .ct-form-card{ padding:28px 20px 24px; border-radius:var(--radius-md); }
  .ct-form-t{ font-size:28px; }
}

/* ---------- 1.19.0 ---------- */
/* ============ PÁGINAS DE CIUDAD (Madrid, Mérida): landing con formulario al final. Clases lc- ============ */
.lc-form-section, .lc-visit-section{ scroll-margin-top:96px; }   /* los botones bajan sin que la cabecera fija tape el título */

/* Cabecera: botón + teléfono y condiciones */
.lc-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.lc-tel{ gap:10px; font-variant-numeric:tabular-nums; }
.lc-tel svg{ color:var(--ice-1); }
.lc-trust{ display:flex; flex-wrap:wrap; gap:6px 0; margin:20px 0 0; padding:0; list-style:none;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.lc-trust li + li::before{ content:"·"; margin:0 12px; color:var(--ice-1); }

/* Cómo empezamos: 3 pasos (reutiliza los pasos de la página de Servicios) */
.lc-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lc-step--msg h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.lc-step--reloj h3::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8e9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.lc-steps-cta{ margin-top:56px; }

/* Qué hacemos: lista corta, sin enlaces (no saca al visitante de la página) */
.lc-svc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:8px 0 0; padding:0; list-style:none; }
.lc-svc li{ margin:0; padding:22px 24px; border:1px solid var(--border); border-radius:var(--radius-md, 14px); background:var(--panel);
  border-top:2px solid var(--c, #22d3ee); }
.lc-svc h3{ margin:0; font-family:var(--ff-head); font-size:17px; font-weight:600; line-height:1.3; color:var(--text); }
.lc-svc h3::before{ content:""; display:inline-block; width:8px; height:8px; margin:0 10px 2px 0; border-radius:50%; background:var(--c, #22d3ee); box-shadow:0 0 10px var(--c, #22d3ee); }
.lc-svc p{ margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--text-dim); }

/* Cierre con el formulario */
.lc-form-section{ border-top:1px solid var(--border-soft);
  background:radial-gradient(ellipse 60% 70% at 85% 100%, rgba(34,211,238,.08), transparent 70%), var(--bg); }
.lc-form-split{ align-items:start; }
.lc-form-text .sv-kicker{ margin-bottom:18px; }
.lc-form-title{ margin:0; font-family:var(--ff-serif); font-weight:600; font-size:clamp(32px,3.8vw,48px); line-height:1.08; letter-spacing:-0.01em; color:var(--text); text-wrap:balance; }
.lc-form-text .lead{ margin-top:20px; max-width:520px; }
.lc-form-tel{ margin-top:18px; font-size:15px; line-height:1.6; }
.lc-form-section .ct-form-t{ margin-bottom:4px; }

/* Barra fija en el móvil: llamar + auditoría (se esconde al llegar al formulario) */
.lc-mbar{ display:none; }
@media (max-width:767px){
  .lc-mbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1.4fr; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(7,11,17,.92); backdrop-filter:blur(10px);
    border-top:1px solid var(--border); transition:transform .25s ease; }
  .lc-mbar.is-off{ transform:translateY(110%); }
  .lc-mbar a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:999px;
    font-family:var(--ff-head); font-size:15px; font-weight:600; text-decoration:none; }
  .lc-mbar-tel{ color:var(--text); border:1px solid var(--border); }
  .lc-mbar-tel svg{ color:var(--ice-1); }
  .lc-mbar-go{ color:#04121c; background:#22d3ee; }
  body:has(.lc-mbar) .site-footer{ padding-bottom:80px; }
  .lc-hero-actions .btn-lg{ width:100%; justify-content:center; }
  .lc-trust{ justify-content:flex-start; }
}
@media (max-width:1024px){ .lc-svc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
  .lc-svc{ grid-template-columns:1fr; }
  .lc-steps{ grid-template-columns:1fr; }
}
@media (min-width:768px) and (max-width:1024px){ .lc-steps .hub-step:nth-child(2)::after{ display:block; } }
@media (max-width:420px){ .lc-trust{ font-size:11px; letter-spacing:.04em; } .lc-trust li + li::before{ margin:0 8px; } }
/* Frase con el resto de servicios, bajo el bloque de SEO local (sustituye a la sección "Qué hacemos") */
.lc-also{ margin:36px 0 0; font-size:15.5px; line-height:1.6; color:var(--text-dim); text-align:center; text-wrap:balance; }
/* Concierta una cita: texto + tarjeta grande de la oficina con un plano decorativo */
.lc-visit{ align-items:center; }
.lc-visit-text .eyebrow{ display:block; margin-bottom:14px; }
.lc-visit-text .h2{ display:block; }
.lc-visit-text .lead{ margin-top:20px; max-width:500px; }
.lc-visit-text .lc-hero-actions{ margin-top:30px; }
.lc-visit-other{ margin:18px 0 0; font-size:14.5px; color:var(--text-dim); }
.lc-visit-other a{ color:#22d3ee; }
.lc-visit-card{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.lc-visit-map{ position:relative; height:230px; border-bottom:1px solid var(--border);
  background:
    linear-gradient(115deg, transparent 47%, rgba(34,211,238,.22) 47.4%, rgba(34,211,238,.22) 49%, transparent 49.4%),
    linear-gradient(28deg, transparent 58%, rgba(255,255,255,.08) 58.3%, rgba(255,255,255,.08) 59.6%, transparent 60%),
    linear-gradient(160deg, transparent 30%, rgba(255,255,255,.06) 30.3%, rgba(255,255,255,.06) 31.2%, transparent 31.5%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(34,211,238,.12), transparent 70%),
    var(--bg-alt); }
.lc-visit-pin{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-22px 0 0 -11px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:#22d3ee; box-shadow:0 0 0 8px rgba(34,211,238,.15), 0 0 30px rgba(34,211,238,.7); }
.lc-visit-pin::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:#04121c; }
.lc-visit-body{ padding:30px 36px 34px; }
.lc-visit-body .sn-office-city{ margin-top:4px; }
@media (max-width:767px){
  .lc-visit-map{ height:170px; }
  .lc-visit-body{ padding:24px 24px 28px; }
  .lc-visit-text .lc-hero-actions .btn-lg{ width:100%; justify-content:center; }
}
/* Formulario propio de las páginas de ciudad */
.lc-form-section .wpforms-field-label .lc-opt{ font-weight:400; color:var(--text-dim-2); }
.lc-form-section .ct-form-card .wpforms-container textarea.wpforms-field-small{ height:96px !important; }
.lc-form-section .lc-cita ul{ margin:0 !important; padding:0 !important; list-style:none; }
.lc-form-section .lc-cita li{ display:flex; align-items:center; gap:12px; margin:0 !important; }
.lc-form-section .lc-cita input[type=checkbox]{ width:20px; height:20px; margin:0; accent-color:#22d3ee; flex:none; }
.lc-form-section .lc-cita label{ font-size:15px !important; color:var(--text) !important; cursor:pointer; }
.lc-form-section .lc-cita li label{ margin:0 !important; padding:0 !important; }

/* ---------- 1.19.1 ---------- */
/* Contacto: enlace de cada oficina a su página de ciudad (encima del enlace "Cómo llegar", que ocupa toda la tarjeta) */
.ct-office-page{ position:relative; z-index:1; justify-self:start; margin-top:14px; font-family:var(--ff-head); font-size:14.5px; font-weight:600;
  color:var(--text); text-decoration:underline; text-decoration-color:rgba(34,211,238,.45); text-underline-offset:4px; }
.ct-office-page:hover, .ct-office-page:focus-visible{ color:#22d3ee; text-decoration-color:#22d3ee; }
.ct-office-page + .sn-office-go{ margin-top:8px; }

/* ==========================================================================
   1.21.0 — Página de servicios: iconos, destacados, Cima y "Te ayudamos a elegir"
   ========================================================================== */
/* Tarjetas: con icono no sale el número automático */
.hub-main:has(.hub-icon)::before{ content:none; }
.hub-main .hub-icon{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:44px; height:44px; margin:0 0 18px;
  border-radius:10px; color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent); background:color-mix(in srgb, var(--c) 8%, transparent);
}
.hub-main .hub-icon img, .hub-main .hub-icon svg{ display:block; width:22px; height:22px; max-width:none; }
.hub-icon svg{ fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.hub-main p.hub-dest{ margin:10px 0 0; color:var(--c); font-size:15px; font-weight:500; line-height:1.45; }
.hub-main p.hub-dest + p{ margin-top:8px; }
/* Fuentes de las cifras, más legibles */
.hub-stat-src{ color:var(--text-dim); font-size:12.5px; }
.hub-stat-src a{ font-size:inherit; }
/* Cabecera: constelación decorativa con forma de cima */
.hub-star-deco{ pointer-events:none; }
.hub-star-deco i{ transform-origin:center; scale:var(--e,1); }
.hub-star-deco::before{ display:none; }
/* Te ayudamos a elegir */
.hub-ayuda-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px; align-items:center; }
.hub-ayuda-texto .h2{ display:block; }
.hub-ayuda-texto .lead{ margin:18px 0 28px; }
.hub-ayuda-vis{
  position:relative; padding:24px; border:1px solid var(--border); border-radius:var(--radius-md); background-color:var(--panel);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:40px 40px;
}
.hub-ayuda-vis p.hub-obj-tit{ margin:0 0 10px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.04em; color:var(--text-dim); }
.hub-obj{ --c:var(--ice-1); position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border); }
.hub-obj .hub-obj-link{ color:var(--text-body); font-size:15.5px; line-height:1.35; text-decoration:none; }
.hub-obj .hub-obj-link::after{ content:""; position:absolute; inset:0; }   /* toda la fila es el enlace */
.hub-obj:hover .hub-obj-link, .hub-obj .hub-obj-link:focus{ color:var(--text); }
.hub-obj .hub-obj-link:focus-visible{ outline:none; }
.hub-obj:has(.hub-obj-link:focus-visible){ outline:2px solid var(--c); outline-offset:2px; }
.hub-obj .hub-obj-tag{
  flex:none; padding:4px 11px; border-radius:var(--radius-pill); font-size:13px; font-weight:500; color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 32%, transparent); background:color-mix(in srgb, var(--c) 7%, transparent);
}
.hub-obj:hover .hub-obj-tag{ border-color:var(--c); }
@media (max-width:980px){ .hub-ayuda-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:480px){ .hub-ayuda-vis{ padding:18px; } .hub-obj{ gap:10px; } .hub-obj .hub-obj-link{ font-size:15px; } }

/* ==========================================================================
   1.22.0 — Páginas de servicio: enlaces que no se oscurecen y textos más legibles
   ========================================================================== */
.sv-case-link, .sv-case-link:hover, .sv-case-link:focus{ color:#22d3ee; }
.sv-cases-more .case-card, .sv-cases-more .case-card:hover, .sv-cases-more .case-card:focus{ color:var(--text); }
.sv-phase-do > span, .sv-note{ color:var(--text-dim); }
.sv-cases-more + .cases-more{ margin:28px 0 0; }
/* Módulos en bloques: los dibujos que antes iban en el código los pinta el tema (solo si el bloque ya no los lleva) */
.serp-row:nth-child(1){ --slot:0; } .serp-row:nth-child(2){ --slot:1; } .serp-row:nth-child(3){ --slot:2; } .serp-row:nth-child(4){ --slot:3; } .serp-row:nth-child(5){ --slot:4; }
.serp-bar:not(:has(svg))::before{ content:""; flex:none; width:15px; height:15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='m20 20-4-4' stroke='black' stroke-width='2' stroke-linecap='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 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='m20 20-4-4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.serp-ai-label:not(:has(svg))::before{ content:""; flex:none; width:13px; height:13px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%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 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.serp-pos{ font-family:var(--ff-head); font-size:14px; letter-spacing:0; margin-left:2px; font-variant-numeric:tabular-nums; }
.serp-rank:has(.serp-pos){ display:flex; align-items:baseline; gap:4px; }
.serp-ai p strong{ color:var(--text); font-weight:600; }
.sv-proof strong{ font-family:var(--ff-head); font-size:18px; font-weight:700; letter-spacing:0; color:var(--text); margin-right:6px; font-variant-numeric:tabular-nums; }
@media (max-width: 640px){ .sv-proof strong{ font-size:16px; margin-right:4px; } }
.sv-geo-link:not(:has(svg))::after, .sv-case-link:not(:has(svg))::after{ content:""; flex:none; width:14px; height:14px; background:currentColor; transition:transform .2s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.sv-case-link:not(:has(svg)):hover::after{ transform:translateX(3px); }
.sv-cases-cta .btn:not(:has(svg))::after{ content:""; flex:none; width:16px; height:16px; background:currentColor; transition:transform .25s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.sv-cases-cta .btn:not(:has(svg)):hover::after{ transform:translateX(3px); }
.sv-monthly li:not(:has(svg))::before{ content:""; flex:none; width:16px; height:16px; background:var(--ice-1); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='black' stroke-width='2.4' 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 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.sv-geo-band:not(:has(.sv-geo-icon))::before{ content:""; width:22px; height:22px; background:#c084fc; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%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 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.sv-cases-more .case-card a.case-client{ color:var(--text-dim); }

/* ==========================================================================

   1.23.0 — Posicionamiento en IA: textos más legibles

   ========================================================================== */

.sv-proofband li b{ color:var(--text-dim); }
.sv-proofband li strong{ display:block; font-family:var(--ff-mono); font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-top:2px; }
/* Conversación de ejemplo en bloques: los iconos los pinta el tema */
.ai-chat-top:not(:has(svg))::before{ content:""; flex:none; width:14px; height:14px; background:#c084fc; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%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 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.ai-avatar:not(:has(svg))::before{ content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%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 24 24' fill='none'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.ai-send:not(:has(svg))::before{ content:""; width:13px; height:13px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6' stroke='black' stroke-width='2.4' 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 24 24' fill='none'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ai-text strong{ color:var(--text); font-weight:600; background:rgba(192,132,252,.18); padding:1px 3px; border-radius:5px; }
.ai-chat.is-start .ai-text strong:has(.w:not(.on)){ background-color:transparent; }
.sv-geo-band--seo:not(:has(.sv-geo-icon))::before{ background:var(--ice-1); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='m20 20-4-4' stroke='black' stroke-width='2' stroke-linecap='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 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='m20 20-4-4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Tabla de auditoría en bloques: en cada casilla se escribe Aparece, No aparece o Dato antiguo */
.sv-audit-grid{ padding-bottom:8.5px; }
.sv-audit-row{ display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--cols,3), 15%); align-items:center; font-size:15px; line-height:1.45; }
.sv-audit-row > p{ margin:0; }
.sv-audit-row + .sv-audit-row:not(:nth-child(2)){ border-top:1px solid var(--border-soft); }
.sv-audit-row--head{ border-bottom:1px solid var(--border); }
.sv-audit-row > .sv-audit-th{ padding:0 12px 12px; text-align:center; font-family:var(--ff-mono); font-size:11.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.sv-audit-row > .sv-audit-th:first-child{ text-align:left; padding-left:0; }
.sv-audit-row > .sv-audit-q{ padding:16px 16px 16px 0; text-align:left; font-weight:500; color:var(--text); }
.sv-audit-row > .sv-audit-cell{ padding:16px 12px; text-align:center; color:var(--text-dim); font-size:13px; }
.sv-audit-row > .sv-audit-cell.is-yes{ color:var(--ice-1); } .sv-audit-row > .sv-audit-cell.is-no{ color:#f87171; } .sv-audit-row > .sv-audit-cell.is-warn{ color:#fbbf24; }
.sv-audit-legend p{ margin:0; display:flex; align-items:center; gap:8px; color:var(--text-dim); }
.sv-audit-legend p .sv-mark{ width:20px; height:20px; }
.sv-audit-legend p .sv-mark::before{ width:9px; height:9px; }
.sv-audit-legend p.is-yes .sv-mark{ color:var(--ice-1); } .sv-audit-legend p.is-no .sv-mark{ color:#f87171; } .sv-audit-legend p.is-warn .sv-mark{ color:#fbbf24; }
@media (max-width: 640px){
  .sv-audit-row--head{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
  .sv-audit-row{ grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); gap:8px; padding:16px 0; }
  .sv-audit-row > .sv-audit-q{ grid-column:1 / -1; padding:0 0 4px; font-size:15px; }
  .sv-audit-row > .sv-audit-cell{ padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); }
  .sv-audit-row > .sv-audit-cell::before{ content:attr(data-ia); font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
}

/* ==========================================================================

   1.24.0 — Páginas de servicio: cajas de "Lo que notarás" alineadas en ordenador

   ========================================================================== */

@media (min-width: 981px){

  .sv-phases{ row-gap:0; }

  .sv-phase{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }

  .sv-phase-do{ margin-bottom:18px; }

  .sv-phase-see{ margin-top:0; }

}
/* PR digital en bloques */
.pr-count:has(.pr-num){ display:flex; gap:.6em; }
.pr-num{ color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.pr-outlet em{ flex:none; width:18px; height:18px; border-radius:4px; display:grid; place-items:center; font-family:var(--ff-serif); font-style:normal; font-size:11px; font-weight:700; letter-spacing:0; background:rgba(255,255,255,.08); color:var(--text); }
.pr-headline strong{ font-weight:700; background:rgba(251,191,36,.18); padding:0 3px; border-radius:4px; }
.pr-ai strong{ color:var(--text); font-weight:600; }
.pr-ai-icon:not(:has(svg))::before{ content:""; width:13px; height:13px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%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 24 24'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.pr-dl{ display:grid; gap:0; margin:4px 0 6px; }
.pr-dl-row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px solid var(--border-soft); }
.pr-dl-row > .pr-dt{ margin:0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); padding-top:3px; }
.pr-dl-row > .pr-dd{ margin:0; font-size:15px; line-height:1.55; color:#c4d1dd; }
@media (max-width: 640px){ .pr-dl-row{ grid-template-columns:1fr; gap:4px; } }

/* ==========================================================================
   1.25.0 — Content marketing en bloques editables
   ========================================================================== */
/* Tarjetas de la cabecera: que al elevarse no se salgan de la pantalla */
@media (min-width: 641px) and (max-width: 1240px){
  .cm-fan .cm-fan-item--5:hover{ --x:90px; }
}
@media (max-width: 640px){
  .cm-fan .cm-fan-item--1:hover{ --x:-62px; }
  .cm-fan .cm-fan-item--2:hover{ --x:-40px; }
  .cm-fan .cm-fan-item--4:hover{ --x:40px; }
  .cm-fan .cm-fan-item--5:hover{ --x:62px; }
}
@media (prefers-reduced-motion: reduce){
  .cm-fan-item .cm-cv{ transition:none; }
}
.cm-fan-item{ cursor:default; }
.cm-cv-list li:not(:has(svg))::before{
  content:""; flex:none; width:15px; height:15px; border-radius:50%; background:#34d399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%2304140d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* Textos con su etiqueta en negrita dentro del mismo bloque */
.cm-bx-f strong{ font-weight:400; color:var(--ice-1); text-transform:uppercase; letter-spacing:.08em; margin-right:8px; }
.cm-stage-what strong{ display:block; margin-bottom:4px; font-weight:400; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }
.cm-report-best strong{ display:block; margin-bottom:3px; font-weight:400; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); }
.cm-link-t strong{ font-family:var(--ff-head); font-size:19px; font-weight:600; color:var(--text); }
/* Calendario: el tema pone las casillas; cada mes empieza fila */
.cm-wf-grid{ grid-auto-rows:22px; }
.cm-wf-m{ grid-column:1; }
.cm-wf .cm-vis-cap:not(:has(.cm-key))::before{ content:""; flex:none; width:10px; height:10px; border-radius:2px; background:#34d399; }
@media (min-width: 981px){
  .cm-bx--hl .cm-wf-grid{ grid-auto-rows:34px; }
  .cm-bx--hl .cm-wf-grid i{ height:34px; }
}
/* Dibujos sin texto: los pinta el tema */
.cm-line-plot{
  display:block; width:100%; height:120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334d399' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%2334d399' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 104 C 90 100, 150 84, 210 66 S 330 22, 392 12 L 392 120 L 8 120 Z' fill='url(%23g)'/%3E%3Cpath d='M8 104 C 90 100, 150 84, 210 66 S 330 22, 392 12' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.cm-ba-bar{ display:block; }
.cm-ba-bar--antes::before, .cm-ba-bar--despues::before{ content:""; display:block; height:100%; border-radius:4px; }
.cm-ba-bar--antes::before{ width:28%; background:rgba(255,255,255,.2); }
.cm-ba-bar--despues::before{ width:86%; background:linear-gradient(90deg, #059669, #34d399); }
.cm-steps li:nth-child(1){ --k:1; } .cm-steps li:nth-child(2){ --k:2; } .cm-steps li:nth-child(3){ --k:3; } .cm-steps li:nth-child(4){ --k:4; } .cm-steps li:nth-child(5){ --k:5; }
.cm-steps strong{ font-family:var(--ff-serif); font-size:20px; font-weight:600; color:var(--text); }
.cm-wire-top:empty::before{ content:""; display:block; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); box-shadow:12px 0 0 rgba(255,255,255,.18), 24px 0 0 rgba(255,255,255,.18); }
.cm-wire-q:empty::before{ content:"+"; font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--ice-1); }
.cm-wire-q:empty::after{ content:""; flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.1); }
/* Flecha de los enlaces a otros servicios */
.cm-link-go:not(:has(svg))::after{
  content:""; flex:none; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   1.26.0 — Paid media en bloques editables
   ========================================================================== */
/* Cabecera: rótulo del panel de ejemplo y luz de "Ajuste semanal" */
.sem-pn .serp-note{ margin:0; z-index:1; }
.sem-pn-top > span{ margin:0; }
.sem-pn-live:not(:has(i))::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#ff8a65; animation:semBlink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .sem-pn-live::before{ animation:none !important; } }

/* Tabla de plataformas en bloques: en cada casilla se escribe Muy indicado, También sirve o No */
.sem-mx-row{ display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--cols,4), 15.8%); align-items:center; border-bottom:1px solid var(--border); }
.sem-mx-row > *{ margin:0; padding:18px 16px; }
.sem-mx-row > :first-child{ padding-left:0; }
.sem-mx-row--head{ border-bottom-color:rgba(255,138,101,.35); }
.sem-mx-th{ font-family:var(--ff-mono); font-size:11px; line-height:1.6; letter-spacing:.08em; text-transform:uppercase; text-align:center; color:var(--text-dim); }
.sem-mx-row > .sem-mx-th{ padding-left:4px; padding-right:4px; white-space:nowrap; }
.sem-mx-row > .sem-mx-th:first-child{ text-align:left; padding-left:0; }
.sem-mx-row:not(.sem-mx-row--head){ transition:background-color .2s ease; }
.sem-mx-row:not(.sem-mx-row--head):hover{ background:rgba(255,138,101,.05); }
.sem-mx-name p{ margin:0; }
.sem-mx-n{ font-family:var(--ff-head); font-size:18px; font-weight:600; line-height:1.6; color:var(--text); }
.sem-mx-d{ margin-top:2px !important; font-size:14px; line-height:1.6; color:var(--text-dim); }
.sem-mx-cell{ text-align:center; font-size:13.5px; line-height:1.6; color:var(--text-dim); }
.sem-mx-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Leyenda: el tema pinta cada punto */
.sem-legend > p{ margin:0; }
.sem-lg{ display:inline-flex; align-items:center; gap:10px; }
.sem-lg::before{ content:""; flex:none; width:14px; height:14px; border-radius:50%; box-sizing:border-box; background:rgba(255,255,255,.08); }
.sem-lg--hi::before{ background:#ff8a65; }
.sem-lg--ok::before{ background:transparent; border:2px solid #ff8a65; }
.sem-lg-note{ margin-left:auto !important; color:var(--text-dim-2); }

/* Qué incluye: las tres tarjetas con la misma altura; títulos en negrita del editor */
.sem-rhythm{ align-items:stretch; }
.sem-col li strong{ display:block; margin-bottom:2px; font-family:var(--ff-head); font-size:16px; font-weight:600; color:var(--text); }

/* Anuncios y SEO: cada pieza de la tarjeta es un bloque */
.sem-seo-card p{ margin:0; }
.sem-seo-t{ font-family:var(--ff-serif); font-size:24px; font-weight:600; line-height:1.6; color:var(--text); }
.sem-seo-link:not(:has(svg))::after{ content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

@media (max-width:980px){
  .sem-mx{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .sem-mx-row--head{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
  .sem-mx-row{ grid-template-columns:1fr 1fr; gap:10px 12px; padding:20px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); }
  .sem-mx-row > *{ padding:0; }
  .sem-mx-name{ grid-column:1 / -1; padding-bottom:6px !important; }
  .sem-mx-cell{ display:flex; align-items:center; gap:10px; text-align:left; }
  .sem-mx-cell::after{ content:attr(data-l); }
  .sem-mx-cell.is-no{ opacity:.45; }
  .sem-mx .sem-dot{ flex:none; width:14px; height:14px; box-shadow:none; }
  .sem-lg-note{ margin-left:0 !important; width:100%; }
}
@media (max-width:640px){
  .sem-mx{ grid-template-columns:1fr; }
}

/* ==========================================================================
   1.27.0 — Diseño web en bloques editables
   ========================================================================== */
/* Rótulos del dibujo de la cabecera, Hosting/Mantenimiento: textos sin márgenes del tema padre */
.dwa-side-k, .dwa-title, .dw-extra-t{ margin:0; }
/* Color de cada tarjeta de "Tu web y nuestros servicios", según su clase */
.dw-link--seo{ --c:#22d3ee; } .dw-link--ia{ --c:#c084fc; } .dw-link--pr{ --c:#fbbf24; } .dw-link--cm{ --c:#34d399; } .dw-link--pm{ --c:#ff8a65; } .dw-link--web{ --c:#ec4899; }
/* Flecha del enlace "Conoce nuestro servicio SEO" */
.dw-view-link:not(:has(svg))::after{ content:""; flex:none; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ==========================================================================
   1.28.0 — Madrid y Mérida en bloques editables
   ========================================================================== */
/* Icono de teléfono de los botones "Llamar" y flecha de los botones principales (antes iban dibujados en el código) */
.lc-tel:not(:has(svg))::before, .lc-mbar-tel:not(:has(svg))::before{ content:""; flex:none; width:16px; height:16px; background:var(--ice-1); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.lc-hero-actions .btn-primary:not(:has(svg))::after{ content:""; flex:none; width:16px; height:16px; background:currentColor; transition:transform .25s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' 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 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.lc-hero-actions .btn-primary:not(:has(svg)):hover::after{ transform:translateX(3px); }

/* ==========================================================================
   1.29.0 — Sobre nosotros en bloques editables
   ========================================================================== */
/* Flecha del botón "Conoce nuestros servicios" (antes iba escrita en el código del botón) */
.sn-btn-services:not(:has(i))::after{ content:"→"; font-style:normal; transition:transform .25s ease; }
.sn-btn-services:not(:has(i)):hover::after, .sn-btn-services:not(:has(i)):focus-visible::after{ transform:translateX(4px); }