/* =====================================================
   VOKKOAGENCY — plantillas.css
   Landing del producto "Sitios Single Page" (/plantillas/)
   Usa el tema claro y los tokens de style.css — esta pagina es
   contenido propio de Vokko (no de un cliente), por eso SI usa el
   branding morado/rosa de la agencia.
   ===================================================== */

/* ── Hero: texto + slider de plantillas ── */
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.page-hero-slider { position: relative; }

.page-hero-slider .browser-mockup {
  animation: float 7s ease-in-out infinite;
}

.hero-slider-stage { position: relative; aspect-ratio: 16 / 10; }

.hero-slider-stage .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.hero-slider-stage .hero-slide.is-active { opacity: 1; }

.hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.hero-slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-page-border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero-slider-dot.is-active { background: var(--gradient); transform: scale(1.3); }
.hero-slider-dot:hover { background: var(--c-accent); }

@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-slider { max-width: 480px; margin: 0 auto; }
}

/* ── Proceso (3 pasos) ── */
.process-onepage { background: var(--c-page-bg); padding: var(--pad-section) 0; }

.process-onepage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.process-onepage-step {
  background: var(--c-page-surface);
  border: 1px solid var(--c-page-border);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
}

/* Cabecera visual de cada paso: numero grande de marca + insignia
   circular con icono, superpuesta (mismo lenguaje que el resto del
   sitio: circulos con degradado morado-rosa), en vez del numero chico
   plano de antes. Cada paso toma un tono distinto tomado del propio
   degradado de marca (--gradient va de #6C3BFF a #FF3BFF), asi el
   propio color ya insinua el avance 1→2→3 sin salirse de la paleta. */
.process-onepage-visual {
  position: relative;
  height: 62px;
  margin-bottom: 26px;
}

.process-onepage-bignum {
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.process-onepage-step:nth-child(1) .process-onepage-bignum { color: #6C3BFF; }
.process-onepage-step:nth-child(2) .process-onepage-bignum { color: #B23BE8; }
.process-onepage-step:nth-child(3) .process-onepage-bignum { color: #FF3BFF; }

.process-onepage-icon {
  position: absolute;
  left: 36px;
  bottom: -4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-page-surface);
  border: 1px solid var(--c-page-border);
  box-shadow: 0 8px 20px rgba(17,17,17,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-onepage-step:nth-child(1) .process-onepage-icon { color: #6C3BFF; }
.process-onepage-step:nth-child(2) .process-onepage-icon { color: #B23BE8; }
.process-onepage-step:nth-child(3) .process-onepage-icon { color: #FF3BFF; }

/* Conector de flujo: una insignia circular entre cada paso y el
   siguiente, con el mismo degradado morado-rosa de los circulos
   numerados (mismo lenguaje visual, no un caracter de texto suelto).
   Centrada en el icono circular de .process-onepage-icon: 32px
   (padding-top de la card) + 44px (centro del icono dentro de
   .process-onepage-visual: bottom:-4px, alto 44px, dentro de un
   contenedor de 62px -> centro en 44px) = 76px, menos la mitad de
   los 32px de la insignia. Se superpone 4px a cada card (gap:24px,
   insignia 32px) para que quede "engarzada" en la costura entre cards. */
.process-onepage-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 60px;
  right: -28px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%205%2016%2012%209%2019%22/%3E%3C/svg%3E"),
    var(--gradient);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 14px 14px, cover;
  box-shadow: 0 6px 16px rgba(108,59,255,0.35);
  z-index: 2;
}

.process-onepage-step h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-page-text);
  margin-bottom: 8px;
}

.process-onepage-step p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-page-muted);
}

/* ── Aviso: se construye con la info real del cliente ── */
.process-onepage-note {
  margin-top: 40px;
  background: rgba(108,59,255,0.06);
  border: 1px solid rgba(108,59,255,0.18);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.process-onepage-note svg { color: var(--c-accent); flex-shrink: 0; margin-top: 2px; }
.process-onepage-note p { font-size: 14.5px; line-height: 1.65; color: var(--c-page-text); margin: 0; }
.process-onepage-note strong { color: var(--c-accent); }

/* ── FAQ (acordeon, mismo patron y clases que servicios.css --
   copiado porque plantillas.css es la unica hoja que carga esta
   pagina, servicios.css no se incluye aqui) ── */
.faq-onepage-section { background: var(--c-page-surface); padding: var(--pad-section) 0; }

.faq-onepage-list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item { border-bottom: 1px solid var(--c-page-border); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font);
}

.faq-question span {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-page-text);
  line-height: 1.4;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.faq-question:hover span { color: var(--c-purple); }

.faq-icon {
  font-size: 22px;
  font-weight: 300;
  color: var(--c-page-muted);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out), color 0.2s;
  line-height: 1;
  width: 24px;
  text-align: center;
}

.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--c-purple); }
.faq-item.open .faq-question span { color: var(--c-page-text); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-out);
}

.faq-answer p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--c-page-muted);
  padding-bottom: 24px;
}

/* ── Boton flotante de WhatsApp (CRO, prueba puntual en esta pagina --
   ver INSTRUCCIONES-ANTIGRAVITY-geo-aeo-y-plantillas-cro.md #3).
   Colores identicos a .btn-whatsapp de style.css -- ese archivo usa el
   hex directo, no una variable --c-whatsapp, asi que se reusa el mismo
   valor literal para quedar consistentes en vez de inventar una
   variable nueva. ── */
.float-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #FFFFFF;
  padding: 14px 20px 14px 14px;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(37,211,102,0.4);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease-out, box-shadow 0.2s;
}
.float-whatsapp:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 34px rgba(37,211,102,0.5); background: #1ebe5b; }
.float-whatsapp svg { flex-shrink: 0; }

@media (max-width: 480px) {
  .float-whatsapp span { display: none; }
  .float-whatsapp { padding: 15px; }
}

/* ── Grid de plantillas ── */
.templates-section { background: var(--c-page-surface); padding: var(--pad-section) 0; }

.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* Mientras Plantilla 3 esta oculta (17/08) solo hay 2 cards visibles --
   quitar este modificador de templates-grid en index.html cuando se
   reactive la tercera plantilla. */
.templates-grid--2up { grid-template-columns: repeat(2, 1fr); }

.template-card {
  background: var(--c-page-bg);
  border: 1px solid var(--c-page-border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.template-card:not(.template-soon):hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(17,17,17,0.1);
}

.template-swatch {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-page-border);
}
.template-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s var(--ease-out);
}
.template-card:hover .template-swatch img { transform: scale(1.04); }

.template-body { padding: 26px 24px; }

.template-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-page-text);
  margin-bottom: 6px;
}

.template-desc {
  font-size: 13.5px;
  color: var(--c-page-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

.template-soon { opacity: 0.6; }
.template-soon .template-swatch { filter: grayscale(0.4); }

.template-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.template-badge-live { background: rgba(74,222,128,0.15); color: #1a9c4b; }
.template-badge-soon { background: rgba(17,17,17,0.06); color: var(--c-page-muted); }

@media (max-width: 900px) {
  .process-onepage-grid, .templates-grid { grid-template-columns: 1fr; }

  /* Layout apilado: la flecha horizontal entre steps deja de tener
     sentido (mismo criterio que .step-connector en el proceso del Home). */
  .process-onepage-step::after { display: none; }
}