<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true'
      expr:dir='data:blog.languageDirection'
      xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='width=device-width, initial-scale=1' name='viewport'/>
  <meta content='Plantilla Blogger moderna, rápida y responsive.' name='description'/>
  <meta content='index,follow' name='robots'/>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
/*
  Blogger Template Studio - CSS base
  Estilos compartidos por todas las plantillas.
*/
:root{
  --primary: #7c3aed;
  --accent: #ef4444;
  --bg: #0f172a;
  --text: #f8fafc;
  --muted: #a8b3c7;
  --soft: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.08);
  --card-strong: rgba(255,255,255,.13);
  --border: rgba(255,255,255,.14);
  --shadow: 0 22px 70px rgba(0,0,0,.26);
  --radius: 18px;
  --max: 1180px;
  --font: Inter, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.28), transparent 32rem),
    radial-gradient(circle at top right, rgba(239,68,68,.18), transparent 30rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 34rem),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:auto;padding:0 22px}
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.logo{font-weight:900;font-size:1.35rem;letter-spacing:0}
.logo span{color:var(--accent)}
.menu{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.menu a{
  color:var(--muted);
  font-weight:800;
  font-size:.93rem;
  padding:8px 10px;
  border-radius:999px;
}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.08)}
.hero{padding:82px 0 52px}
.hero .container{display:grid;gap:24px}
.hero h1{
  max-width:900px;
  font-size:clamp(2.35rem,7vw,5.45rem);
  line-height:1;
  margin:0;
  letter-spacing:0;
}
.hero p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:1.13rem;
}
.eyebrow{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ddd6fe;
  background:rgba(124,58,237,.14);
  border:1px solid rgba(221,214,254,.24);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:.8rem;
  text-transform:uppercase;
}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--primary);
  color:white;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.btn.secondary{background:rgba(255,255,255,.08);color:var(--text)}
.section{padding:50px 0}
.section-title{max-width:780px;margin:0 0 22px}
.section-title h2{font-size:clamp(1.75rem,4vw,3rem);line-height:1.08;margin:0 0 10px;letter-spacing:0}
.section-title p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.card,.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.card.featured{background:var(--card-strong);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.card h2,.card h3,.panel h2,.panel h3{margin:0 0 10px;letter-spacing:0;line-height:1.15}
.card p,.panel p{margin:0;color:var(--muted)}
.badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:7px 10px;
  margin-bottom:12px;
  border-radius:999px;
  border:1px solid var(--border);
  color:#f1f5f9;
  font-size:.78rem;
  font-weight:900;
}
.mini-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.mini-list li{padding:12px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.mini-list li:last-child{border-bottom:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{padding:16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05)}
.stat strong{display:block;font-size:1.6rem;color:#fff;line-height:1}
.stat span{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}
.timeline{display:grid;gap:14px}
.timeline-item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.dot{width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:7px;box-shadow:0 0 0 6px rgba(239,68,68,.14)}
.quote{font-size:1.12rem;color:var(--soft);font-weight:700}
.product-price{font-size:1.55rem;font-weight:900;color:#fff;margin:12px 0}
.product-meta{color:var(--muted);font-size:.92rem}
.sidebar{display:grid;gap:18px}
.main-posts,.sidebar-section{display:block}
.footer{
  border-top:1px solid var(--border);
  padding:34px 0;
  color:var(--muted);
  margin-top:46px;
}
.footer .container{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:920px){
  .grid,.grid-2,.layout-2{grid-template-columns:1fr}
  .hero{padding:58px 0 36px}
  .stats{grid-template-columns:1fr}
}
@media(max-width:680px){
  .container{padding:0 18px}
  .nav{align-items:flex-start;flex-direction:column;padding:16px 0}
  .menu{width:100%}
  .menu a{padding:7px 8px}
  .section{padding:38px 0}
  .card,.panel{padding:18px}
  .footer .container{display:grid}
}

  ]]></b:skin>
</head>
<body class='personal-brand model-template'>
  <header class='site-header'>
    <div class='container nav'>
      <a class='logo' expr:href='data:blog.homepageUrl'>Mi Blog Profesional<span>.</span></a>
      <nav class='menu' aria-label='Menu principal'>
        <a href='/'>Inicio</a>
        <a href='/search/label/Categorías'>Categorías</a>
        <a href='/p/servicios.html'>Servicios</a>
        <a href='/p/contacto.html'>Contacto</a>
      </nav>
    </div>
  </header>

  <main>
    <section class='hero'>
      <div class='container'>
        <div class='eyebrow'>Personal brand</div>
        <h1>Construye una presencia profesional alrededor de tu experiencia.</h1>
        <p>Una estructura para explicar quien eres, que haces, que publicas y como pueden contactarte.</p>
        <div class='actions'>
          <a class='btn' href='/p/contacto.html'>Trabajemos</a>
          <a class='btn secondary' href='/search'>Leer articulos</a>
        </div>
      </div>
    </section>

    <section class='section'>
      <div class='container'>
        <div class='section-title'>
          <h2>Tu autoridad en bloques claros.</h2>
          <p>Muestra especialidad, prueba social y contenido sin depender de una web compleja.</p>
        </div>
        <div class='grid'>
          <article class='card'>
            <span class='badge'>Experiencia</span>
            <h3>Especialidad visible</h3>
            <p>Resume tu campo, publico objetivo y resultado que ayudas a conseguir.</p>
          </article>
          <article class='card'>
            <span class='badge'>Contenido</span>
            <h3>Ideas publicadas</h3>
            <p>Convierte articulos y guias en una biblioteca de autoridad.</p>
          </article>
          <article class='card'>
            <span class='badge'>Contacto</span>
            <h3>Puerta de entrada</h3>
            <p>Incluye una ruta clara hacia servicios, mentorias o colaboraciones.</p>
          </article>
        </div>
      </div>
    </section>

    <section class='section'>
      <div class='container grid-2'>
        <div class='panel'>
          <h2>Indicadores clave</h2>
          <div class='stats'>
            <div class='stat'><strong>3</strong><span>areas clave</span></div>
            <div class='stat'><strong>1</strong><span>CTA principal</span></div>
            <div class='stat'><strong>0</strong><span>scripts externos</span></div>
          </div>
        </div>
        <div class='panel'>
          <h2>Flujo recomendado</h2>
          <div class='timeline'>
            <div class='timeline-item'><span class='dot'></span><p>Define tu promesa profesional.</p></div>
            <div class='timeline-item'><span class='dot'></span><p>Publica contenido pilar.</p></div>
            <div class='timeline-item'><span class='dot'></span><p>Dirige consultas a una pagina de contacto.</p></div>
          </div>
        </div>
      </div>
    </section>

    <section class='section'>
      <div class='container layout-2'>
        <div>
          <div class='section-title'>
            <h2>Ideas recientes</h2>
            <p>Usa el blog nativo para publicar novedades, recursos y casos.</p>
          </div>
          <b:section class='main-posts' id='main' maxwidgets='1' name='Entradas principales' showaddelement='yes'>
            <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='2'/>
          </b:section>
        </div>
        <aside class='sidebar'>
          <div class='panel'>
            <h3>Ideal para</h3>
            <ul class='mini-list'>
              <li>Consultores</li>
              <li>Autores</li>
              <li>Creadores</li>
              <li>Profesionales independientes</li>
            </ul>
          </div>
          <b:section class='sidebar-section' id='sidebar' maxwidgets='6' name='Barra lateral' showaddelement='yes'>
            <b:widget id='Profile1' locked='false' title='Perfil' type='Profile' version='2'/>
            <b:widget id='Label1' locked='false' title='Categorias' type='Label' version='2'/>
            <b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive' version='2'/>
          </b:section>
        </aside>
      </div>
    </section>
  </main>

  <footer class='footer'>
    <div class='container'>
      <strong>Mi Blog Profesional</strong>
      <span>Plantilla Blogger moderna, rápida y responsive. · © 2026</span>
    </div>
  </footer>
</body>
</html>