/* ============================================================
   ESPACIO ROJO — Página de producto
   Hero con icono y carrusel, secciones, flujo de pasos,
   tarjetas de descarga y banner final.
   Extraído de tevlru.html para que todas las páginas de
   producto salgan de la misma hoja. Lo genera build.js.
   ============================================================ */

/* ---------- HERO DE PRODUCTO ----------
   base.css define .page-hero como una columna para el blog; aquí es
   de dos, con el texto a la izquierda y el visual a la derecha. */
.page-hero {
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem;
  padding:calc(var(--nav-h) + 4rem) clamp(1.5rem,6vw,6rem) 5rem;
  min-height:0;
}
.page-hero-glow { top:-80px; right:-80px; width:640px; height:640px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 65%); }
.page-hero h1 span { color:var(--accent); }
.page-hero p { color:rgba(255,255,255,0.6); font-size:1.1rem; font-weight:300; line-height:1.65; max-width:none; }
.page-hero .breadcrumb { margin-bottom:1.25rem; }
/* Producto sin carrusel: una sola columna, texto a ancho cómodo */
.page-hero.no-visual { grid-template-columns:1fr; }
.page-hero.no-visual .page-hero-inner { max-width:780px; }
.page-hero.no-visual h1 { font-size:clamp(2rem,5.5vw,3.6rem); }
.section-tag { color:var(--accent); }

@media (max-width:860px) {
  .page-hero { grid-template-columns:1fr; padding-bottom:3rem; }
  .page-hero-visual { order:-1; }
}

.page-hero-visual { position:relative; z-index:2; }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:var(--accent-glow); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; padding:0.35rem 0.9rem; border-radius:100px; margin-bottom:1.5rem; }
.hero-badge i { font-size:0.65rem; }
.hero-icon { width:64px; height:64px; border-radius:16px; overflow:hidden; margin-bottom:1.75rem; box-shadow:0 8px 32px color-mix(in srgb, var(--accent) 25%, transparent); }
.hero-icon img { width:100%; height:100%; object-fit:cover; }
@media(max-width:860px) {
      .page-hero { grid-template-columns:1fr; padding-bottom:3rem; }
      .page-hero-visual { order:-1; }
    }
/* SECTION */
    .section { padding:5rem clamp(1.5rem,6vw,6rem); }
.section-tag { font-size:0.73rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:0.85rem; display:flex; align-items:center; gap:0.5rem; }
.section-tag::before { content:''; width:18px; height:2px; background:var(--accent); }
h2.section-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,3.5vw,2.8rem); letter-spacing:-0.03em; line-height:1.1; margin-bottom:1.25rem; }
.section-sub { color:var(--muted); font-size:1.1rem; max-width:700px; line-height:1.7; margin-bottom:3.5rem; }
/* CONTENT BOX */
    .content-box { background:var(--white); border:1px solid var(--border); border-radius:24px; padding:3rem; margin-bottom:2rem; }
.content-box h3 { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:1.1rem; display:flex; align-items:center; gap:0.75rem; }
.content-box h3 i { color:var(--accent); }
.content-box p { color:var(--muted); font-size:1.05rem; line-height:1.7; margin-bottom:1.25rem; }
.content-box p:last-child { margin-bottom:0; }
.content-box ul { list-style:none; }
.content-box ul li { display:flex; align-items:flex-start; gap:0.75rem; color:var(--muted); font-size:1rem; line-height:1.6; margin-bottom:0.75rem; }
.content-box ul li i { color:var(--accent); margin-top:0.25rem; flex-shrink:0; }
/* FLOW DIAGRAM */
    .flow { display:flex; align-items:center; justify-content:center; gap:1rem; margin:2.5rem 0; flex-wrap:wrap; }
.flow-step { display:flex; flex-direction:column; align-items:center; gap:0.6rem; padding:1.2rem 1.5rem; background:var(--cream); border:1px solid var(--border-strong); border-radius:16px; min-width:130px; text-align:center; }
.flow-step-icon { width:44px; height:44px; border-radius:12px; background:var(--accent-glow); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.15rem; }
.flow-step-label { font-family:'Syne',sans-serif; font-weight:700; font-size:0.88rem; color:var(--ink); }
.flow-step-sub { font-size:0.78rem; color:var(--muted-light); }
.flow-arrow { color:var(--border-strong); font-size:1.1rem; }
/* STEPS */
    .steps { display:flex; flex-direction:column; gap:1.5rem; margin-top:1rem; }
.step { display:flex; gap:1.5rem; align-items:flex-start; }
.step-num { width:36px; height:36px; min-width:36px; border-radius:50%; background:var(--accent); color:white; font-family:'Syne',sans-serif; font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center; }
.step-body h4 { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; margin-bottom:0.3rem; }
.step-body p { color:var(--muted); font-size:0.95rem; line-height:1.6; }
/* DOWNLOAD */
    .download-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; }
@media(max-width:640px){ .download-grid { grid-template-columns:1fr; } }
.download-card {
      background:var(--white); border:1px solid var(--border); border-radius:24px;
      padding:2.5rem; display:flex; flex-direction:column; gap:1.25rem;
      transition:box-shadow 0.2s, border-color 0.2s;
    }
.download-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.08); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.download-card-header { display:flex; align-items:center; gap:1rem; }
.download-platform-icon { width:52px; height:52px; border-radius:14px; background:var(--accent-glow); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.5rem; }
.download-platform-name { font-family:'Syne',sans-serif; font-weight:800; font-size:1.3rem; }
.download-platform-sub { font-size:0.85rem; color:var(--muted); margin-top:0.15rem; }
.download-reqs { list-style:none; }
.download-reqs li { display:flex; align-items:center; gap:0.6rem; font-size:0.9rem; color:var(--muted); margin-bottom:0.5rem; }
.download-reqs li i { color:var(--accent); font-size:0.75rem; }
.btn-download {
      display:inline-flex; align-items:center; justify-content:center; gap:0.65rem;
      background:var(--accent); color:white;
      font-family:'DM Sans',sans-serif; font-size:0.97rem; font-weight:600;
      padding:0.9rem 1.5rem; border-radius:100px; border:none; cursor:pointer;
      transition:background var(--ease-out), transform var(--ease-out), box-shadow var(--ease-out);
      text-decoration:none; margin-top:auto;
    }
.btn-download:hover { background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-download-alt {
      display:inline-flex; align-items:center; justify-content:center; gap:0.65rem;
      background:transparent; color:var(--accent);
      font-family:'DM Sans',sans-serif; font-size:0.88rem; font-weight:500;
      padding:0.65rem 1.2rem; border-radius:100px; border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
      cursor:pointer; transition:background var(--ease-out), border-color var(--ease-out);
      text-decoration:none;
    }
.btn-download-alt:hover { background:var(--accent-glow); border-color:var(--accent); }
.download-actions { display:flex; flex-direction:column; gap:0.65rem; }
.file-badge { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(0,0,0,0.04); border:1px solid var(--border); border-radius:8px; padding:0.3rem 0.7rem; font-size:0.78rem; color:var(--muted); font-family:monospace; }
/* FREE BANNER */
    .free-banner {
      background:var(--ink); border-radius:24px; padding:3.5rem;
      text-align:center; position:relative; overflow:hidden;
    }
.free-banner-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 65%); pointer-events:none; }
.free-banner h2, .free-banner h3 { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; color:white; margin-bottom:0.75rem; position:relative; z-index:1; }
.free-banner p { color:rgba(255,255,255,0.5); font-size:1rem; line-height:1.7; max-width:540px; margin:0 auto; position:relative; z-index:1; }
.free-badge { display:inline-flex; align-items:center; gap:0.5rem; background:var(--accent-glow); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; padding:0.4rem 1rem; border-radius:100px; margin-bottom:1.25rem; position:relative; z-index:1; }
/* NAV SCROLL */
    nav.scrolled { border-bottom-color:rgba(255,255,255,0.12); box-shadow:0 4px 32px rgba(0,0,0,0.28); }
/* FOOTER */
/* CAROUSEL */
    .carousel-wrap { position:relative; }
.carousel-track-outer { border-radius:20px; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.5); }
.carousel-track { display:flex; transition:transform 0.45s cubic-bezier(0.25,0.8,0.25,1); will-change:transform; }
.carousel-slide { min-width:100%; position:relative; }
.carousel-slide img { width:100%; height:auto; display:block; }
.carousel-caption { position:absolute; bottom:0; left:0; right:0; padding:1.25rem 1.5rem; background:linear-gradient(transparent, rgba(0,0,0,0.72)); color:white; font-size:0.9rem; font-weight:400; }
.carousel-btn {
      position:absolute; top:50%; transform:translateY(-50%);
      width:44px; height:44px; border-radius:50%;
      background:rgba(255,255,255,0.1); backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,0.18); color:white;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:0.9rem; transition:background 0.2s, border-color 0.2s;
      z-index:10;
    }
.carousel-btn:hover { background:var(--accent); border-color:var(--accent); }
.carousel-btn.prev { left:-22px; }
.carousel-btn.next { right:-22px; }
.carousel-dots { display:flex; justify-content:center; gap:0.55rem; margin-top:1.5rem; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); border:none; cursor:pointer; padding:0; transition:background 0.2s, transform 0.2s; }
.carousel-dot.active { background:var(--accent); transform:scale(1.3); }
@media(max-width:700px) { .carousel-btn.prev { left:4px; } .carousel-btn.next { right:4px; } }
/* REVEAL */

    @media(max-width:700px) {
      .nav-links { display:none; }
      .nav-burger { display:block; }
      .flow { flex-direction:column; }
      .flow-arrow { transform:rotate(90deg); }
      .footer-inner { grid-template-columns:1fr 1fr; gap:2rem; }
      .free-banner { padding:2.5rem 1.5rem; }
    }
@media(max-width:480px) {
      .footer-inner { grid-template-columns:1fr; }
      .footer-bottom { flex-direction:column; align-items:flex-start; }
    }

/* Cada página de producto define su acento en un <style> propio:
   :root { --accent: #067D1C; --accent-deep: #04600f; }
   Estos son el respaldo. */
:root {
  --accent: #10b981;
  --accent-deep: #059669;
  --accent-glow: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ============================================================
   COMPONENTES DE PÁGINA GENERADA
   (los usan las páginas de producto y las de equipo)
   ============================================================ */

.section-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.6rem,3.4vw,2.5rem); letter-spacing:-0.03em; line-height:1.15; margin-bottom:1rem; }
.section-title span { color:var(--accent); }

/* ---------- REJILLA DE CARACTERÍSTICAS ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.25rem; margin-top:2.5rem; }
.feature-card {
  background:var(--white); border:1px solid var(--border); border-radius:16px; padding:1.75rem;
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  display:flex; flex-direction:column;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,0.07); border-color:var(--border-strong); }
.feature-icon {
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-glow); color:var(--accent); font-size:1.1rem; margin-bottom:1.1rem;
}
.feature-card h3 { font-family:'Syne',sans-serif; font-size:1.02rem; font-weight:700; margin-bottom:0.5rem; line-height:1.3; }
.feature-card p { color:var(--muted); font-size:0.9rem; line-height:1.65; margin:0; flex:1; }

.producto-link { text-decoration:none; color:inherit; }
.producto-link-more { color:var(--accent); font-size:0.86rem; font-weight:500; display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem; transition:gap var(--ease-out); }
.producto-link:hover .producto-link-more { gap:0.7rem; }

/* ---------- PRECIOS ---------- */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2.5rem; max-width:760px; }
.pricing-card { position:relative; background:var(--white); border:1px solid var(--border); border-radius:18px; padding:2rem; }
.pricing-card.featured { border-color:var(--accent); box-shadow:0 12px 40px color-mix(in srgb, var(--accent) 16%, transparent); }
.pricing-flag {
  position:absolute; top:-11px; left:2rem; background:var(--accent); color:#fff; font-size:0.7rem;
  font-weight:600; text-transform:uppercase; letter-spacing:0.08em; padding:0.25rem 0.8rem; border-radius:100px;
}
.pricing-name { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted-light); margin-bottom:0.6rem; }
.pricing-price { font-family:'Syne',sans-serif; font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin-bottom:0.4rem; overflow-wrap:break-word; }
.pricing-note { color:var(--muted); font-size:0.87rem; margin-bottom:1.5rem; }
.pricing-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.7rem; }
.pricing-features li { display:flex; align-items:flex-start; gap:0.6rem; font-size:0.9rem; color:var(--muted); line-height:1.5; }
.pricing-features i { color:var(--accent); font-size:0.75rem; margin-top:0.35rem; flex-shrink:0; }

/* ---------- PERSONA ---------- */
.persona-meta { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; color:rgba(255,255,255,0.45); font-size:0.86rem; }
.persona-meta i { color:var(--accent); margin-right:0.4rem; }
.persona-avatar {
  position:relative; aspect-ratio:1; max-width:320px; margin-left:auto; border-radius:24px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
.persona-initials { font-family:'Syne',sans-serif; font-size:clamp(3rem,7vw,5rem); font-weight:800; letter-spacing:-0.04em; }
.persona-badge {
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  color:#fff; font-size:0.72rem; font-weight:600; padding:0.3rem 0.9rem; border-radius:100px;
}
.persona-quote {
  border-left:3px solid var(--accent); padding:0.9rem 1.4rem; margin:1.75rem 0 0;
  background:var(--accent-glow); border-radius:0 12px 12px 0; font-style:italic;
  font-size:1.02rem; color:var(--ink); line-height:1.65;
}
.persona-skills { display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:2.5rem; }
.persona-skill {
  font-size:0.82rem; background:var(--white); color:var(--muted); padding:0.4rem 0.95rem;
  border-radius:100px; border:1px solid var(--border); font-weight:500;
}

/* ---------- RELACIONADOS (misma pieza que el blog) ---------- */
.related-section { max-width:1080px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3rem) 5rem; }
.related-title { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:1.75rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.related-card { position:relative; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--white); transition:transform var(--ease), box-shadow var(--ease); }
.related-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.08); }
.related-cover { height:96px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
.related-body { padding:1.15rem; }
.related-cat { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--red); margin-bottom:0.45rem; }
.related-post-title { font-family:'Syne',sans-serif; font-size:0.95rem; font-weight:700; line-height:1.35; margin-bottom:0.45rem; }
.related-post-title a { color:inherit; text-decoration:none; }
.related-post-title a::after { content:''; position:absolute; inset:0; }
.related-meta { font-size:0.75rem; color:var(--muted-light); margin:0; }

@media (max-width:900px) {
  .persona-avatar { margin:2rem auto 0; }
  .persona-meta { gap:1rem; }
}