:root {
  --verde: #0F6E56;
  --verde-claro: #1D9E75;
  --verde-palido: #E1F5EE;
  --verde-hover: #085041;
  --negro: #08201a;
  --gris-oscuro: #0d2b22;
  --gris-medio: #2d4a3e;
  --gris-suave: #f2f6f4;
  --blanco: #ffffff;
  --acento: #EF9F27;
  --acento-suave: #FAEEDA;
  --texto-secundario: #567065;
  --borde: #dce8e2;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Lato',sans-serif; background:var(--blanco); color:var(--negro); overflow-x:hidden; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.logo { font-family:'Playfair Display',serif; font-weight:800; font-size:1.3rem; color:var(--negro); text-decoration:none; letter-spacing:-0.5px; }
.logo span { color:var(--verde-claro); }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a { font-size:0.9rem; font-weight:400; color:var(--texto-secundario); text-decoration:none; transition:color .2s; letter-spacing:0.2px; }
.nav-links a:hover { color:var(--negro); }
.nav-links a.active { color:var(--negro); font-weight:700; }
.nav-cta { background:var(--negro); color:var(--blanco)!important; padding:10px 22px; border-radius:40px; font-weight:500!important; transition:background .2s!important; }
.nav-cta:hover { background:var(--verde)!important; }
.menu-btn { display:none; background:none; border:none; cursor:pointer; font-size:1.5rem; }

/* HERO */
.hero {
  background:var(--negro);
  padding:100px 5% 80px;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; top:-100px; right:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(29,158,117,0.15) 0%, transparent 70%);
  border-radius:50%;
}
.hero::after {
  content:'';
  position:absolute; bottom:-50px; left:20%;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(239,159,39,0.08) 0%, transparent 70%);
  border-radius:50%;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(29,158,117,0.15);
  border:1px solid rgba(29,158,117,0.3);
  color:var(--verde-claro);
  padding:6px 16px; border-radius:40px;
  font-size:0.8rem; font-weight:500; letter-spacing:0.5px;
  margin-bottom:2rem;
}
.hero-badge::before { content:'●'; font-size:0.5rem; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,6vw,5rem);
  font-weight:800;
  color:var(--blanco);
  line-height:1.1;
  letter-spacing:-1px;
  max-width:800px;
  margin-bottom:1.5rem;
}
.hero h1 em { color:var(--verde-claro); font-style:italic; }
.hero-sub {
  font-size:1.15rem;
  color:rgba(255,255,255,0.6);
  max-width:560px;
  line-height:1.75;
  margin-bottom:2.5rem;
  font-weight:300;
  letter-spacing:0.1px;
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.btn-primary {
  background:var(--verde-claro); color:var(--blanco);
  padding:15px 32px; border-radius:40px;
  font-weight:500; font-size:1rem;
  text-decoration:none; border:none; cursor:pointer;
  transition:background .2s, transform .2s;
  display:inline-block;
}
.btn-primary:hover { background:var(--verde); transform:translateY(-1px); }
.btn-outline {
  background:transparent; color:var(--blanco);
  padding:15px 32px; border-radius:40px;
  font-weight:400; font-size:1rem;
  text-decoration:none; border:1px solid rgba(255,255,255,0.2);
  cursor:pointer; transition:border-color .2s;
  display:inline-block;
}
.btn-outline:hover { border-color:rgba(255,255,255,0.5); }
.hero-stats {
  display:flex; gap:3rem;
  margin-top:4rem;
  padding-top:3rem;
  border-top:1px solid rgba(255,255,255,0.08);
}
.stat-num { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--blanco); }
.stat-num span { color:var(--verde-claro); }
.stat-label { font-size:0.8rem; color:rgba(255,255,255,0.4); margin-top:4px; letter-spacing:0.5px; }

/* PAGE HEADER */
.page-header {
  background:var(--negro); color:var(--blanco);
  padding:100px 5% 60px; text-align:center;
}
.page-header h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800; letter-spacing:-1px;
  line-height:1.1; margin:1rem 0 1.5rem;
}
.page-header p {
  font-size:1.1rem; color:rgba(255,255,255,0.6);
  max-width:600px; margin:0 auto; line-height:1.7; font-weight:300;
}

/* SECCIONES */
section { padding:90px 5%; }
.section-tag {
  font-family:'Lato',sans-serif;
  font-size:0.72rem; font-weight:700; letter-spacing:3px;
  color:var(--verde); text-transform:uppercase;
  margin-bottom:1rem;
  display:block;
}
h2.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800; letter-spacing:-0.5px;
  line-height:1.2; margin-bottom:1.2rem;
}
.section-sub {
  font-size:1.05rem; color:var(--texto-secundario);
  max-width:550px; line-height:1.7;
  margin-bottom:3.5rem;
  font-weight:300;
}

/* SERVICES GRID */
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5px;
  background:var(--negro);
  border:1.5px solid var(--negro);
  border-radius:20px;
  overflow:hidden;
}
.services-grid.grid-2x2 {
  grid-template-columns:repeat(2,1fr);
  background:var(--borde);
  border-color:var(--borde);
}
.services-grid.grid-2x2 .service-card { cursor:default; }
.service-card {
  background:var(--blanco);
  padding:2rem;
  transition:background .2s;
}
.service-card:hover { background:var(--gris-suave); }
.service-icon {
  width:46px; height:46px;
  background:var(--verde-palido);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  margin-bottom:1.2rem;
}
.service-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.15rem; font-weight:700;
  margin-bottom:0.75rem;
  letter-spacing:-0.2px;
}
.service-card p { font-size:0.9rem; color:var(--texto-secundario); line-height:1.6; }
.service-link {
  margin-top:1.5rem;
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.85rem; font-weight:500;
  color:var(--verde); text-decoration:none;
}
.service-link:hover { gap:10px; }

/* PROCESO */
.proceso-steps { display:flex; flex-direction:column; gap:0; }
.paso {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid var(--borde);
  align-items:start;
}
.paso:last-child { border-bottom:none; }
.paso-num {
  font-family:'Playfair Display',serif;
  font-size:3rem; font-weight:800;
  color:var(--borde);
  line-height:1;
}
.paso-content h3 {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700;
  margin-bottom:0.5rem;
}
.paso-content p { font-size:0.95rem; color:var(--texto-secundario); line-height:1.6; }

/* DARK SECTION */
.dark-section { background:var(--negro); color:var(--blanco); padding:90px 5%; }
.dark-section .section-tag { color:var(--verde-claro); }
.dark-section .section-sub { color:rgba(255,255,255,0.5); }

/* TESTIMONIALS */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:3rem; }
.testi-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:2rem;
}
.testi-stars { color:var(--acento); margin-bottom:1rem; font-size:1.1rem; }
.testi-text { font-size:0.95rem; color:rgba(255,255,255,0.7); line-height:1.7; margin-bottom:1.5rem; font-weight:300; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--verde-palido);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:0.85rem; color:var(--verde);
}
.testi-name { font-size:0.9rem; font-weight:500; color:var(--blanco); }
.testi-role { font-size:0.8rem; color:rgba(255,255,255,0.4); }

/* PRECIOS */
.precios-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:3rem; }
.precio-card {
  border:1px solid var(--borde);
  border-radius:20px; padding:2.5rem;
  position:relative;
  transition:border-color .2s, transform .2s;
}
.precio-card:hover { border-color:var(--verde-claro); transform:translateY(-3px); }
.precio-card.featured {
  background:var(--negro); color:var(--blanco);
  border-color:var(--negro);
}
.precio-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--verde-claro); color:var(--blanco);
  padding:4px 16px; border-radius:40px;
  font-size:0.75rem; font-weight:500;
}
.precio-nombre { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; margin-bottom:1rem; }
.precio-val { font-family:'Playfair Display',serif; font-size:2.8rem; font-weight:800; letter-spacing:-1px; }
.precio-val span { font-size:1rem; font-weight:400; }
.precio-periodo { font-size:0.8rem; color:var(--texto-secundario); margin-top:0.3rem; }
.precio-card.featured .precio-periodo { color:rgba(255,255,255,0.4); }
.precio-features { list-style:none; margin:2rem 0; display:flex; flex-direction:column; gap:0.75rem; }
.precio-features li { font-size:0.9rem; display:flex; align-items:center; gap:10px; }
.precio-features li::before { content:'✓'; color:var(--verde-claro); font-weight:700; }
.precio-card.featured .precio-features li { color:rgba(255,255,255,0.8); }

/* BLOG */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.blog-card {
  border:1px solid var(--borde);
  border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .2s, border-color .2s;
  display:block;
}
.blog-card:hover { transform:translateY(-4px); border-color:var(--verde-claro); }
.blog-img {
  height:180px;
  position:relative;
  overflow:hidden;
}
.blog-img-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem;
}
.blog-content { padding:1.5rem; }
.blog-tag {
  font-size:0.75rem; font-weight:500; letter-spacing:1px;
  color:var(--verde); text-transform:uppercase;
  margin-bottom:0.75rem; display:block;
}
.blog-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.05rem; font-weight:700;
  margin-bottom:0.75rem; line-height:1.35;
}
.blog-card p { font-size:0.875rem; color:var(--texto-secundario); line-height:1.6; }
.blog-meta { display:flex; align-items:center; gap:1rem; margin-top:1.2rem; }
.blog-date { font-size:0.78rem; color:var(--texto-secundario); }
.blog-read { font-size:0.78rem; color:var(--verde); font-weight:500; }

/* CONTACTO */
.contacto-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.contacto-info h2 { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:800; letter-spacing:-0.5px; margin-bottom:1rem; }
.contacto-info p { color:var(--texto-secundario); line-height:1.7; margin-bottom:2rem; font-weight:300; }
.info-items { display:flex; flex-direction:column; gap:1.5rem; }
.info-item { display:flex; gap:1rem; align-items:flex-start; }
.info-icon {
  width:42px; height:42px; background:var(--verde-palido); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.info-item strong { display:block; font-size:0.9rem; margin-bottom:3px; }
.info-item span { font-size:0.85rem; color:var(--texto-secundario); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 16px;
  border:1px solid var(--borde); border-radius:10px;
  font-family:'Lato',sans-serif; font-size:0.95rem;
  background:var(--blanco); color:var(--negro);
  transition:border-color .2s;
  outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--verde-claro);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--borde); padding:1.5rem 0; }
.faq-q {
  font-family:'Playfair Display',serif;
  font-size:1rem; font-weight:700;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-q::after { content:'+'; font-size:1.3rem; color:var(--verde); transition:transform .2s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { font-size:0.9rem; color:var(--texto-secundario); line-height:1.7; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; }
.faq-item.open .faq-a { max-height:300px; padding-top:1rem; }

/* VALORES */
.valores-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:2rem; }
.valor-card { padding:1.5rem; border:1px solid var(--borde); border-radius:16px; }
.valor-card span { font-size:1.8rem; display:block; margin-bottom:0.75rem; }
.valor-card strong { display:block; font-family:'Playfair Display',serif; font-size:1rem; margin-bottom:0.5rem; }
.valor-card p { font-size:0.875rem; color:var(--texto-secundario); line-height:1.6; }

/* NOSOTROS */
.nosotros-split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }

/* FOOTER */
footer {
  background:var(--negro); color:rgba(255,255,255,0.5);
  padding:60px 5% 30px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo { font-family:'Playfair Display',serif; font-weight:800; font-size:1.3rem; color:var(--blanco); margin-bottom:1rem; }
.footer-logo span { color:var(--verde-claro); }
.footer-desc { font-size:0.875rem; line-height:1.7; max-width:260px; }
.footer-col h4 { font-size:0.85rem; font-weight:500; color:var(--blanco); margin-bottom:1rem; letter-spacing:0.5px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col ul a { font-size:0.85rem; color:rgba(255,255,255,0.45); text-decoration:none; transition:color .2s; }
.footer-col ul a:hover { color:var(--blanco); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:0.8rem; }

/* CTA BAND */
.cta-band {
  background:var(--verde-palido);
  padding:80px 5%;
  text-align:center;
}
.cta-band h2 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; letter-spacing:-0.5px; margin-bottom:1rem; }
.cta-band p { font-size:1.05rem; color:var(--texto-secundario); margin-bottom:2rem; font-weight:300; }

/* HERO VISUAL */
.hero-visual {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  width:380px; height:300px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:2rem;
  display:none;
}
@media(min-width:1100px) { .hero-visual { display:block; } }
.rank-card {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:1rem;
  margin-bottom:0.8rem;
  display:flex; align-items:center; gap:1rem;
}
.rank-num { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--verde-claro); width:28px; }
.rank-bar-wrap { flex:1; }
.rank-label { font-size:0.75rem; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.rank-bar { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.rank-fill { height:100%; background:var(--verde-claro); border-radius:3px; animation:fillBar 2s ease-out forwards; }
@keyframes fillBar { from{width:0} }

/* ARTICLE */
.article-hero { background:var(--negro); padding:80px 5% 60px; color:var(--blanco); }
.article-content { max-width:720px; margin:0 auto; padding:60px 5%; }
.article-content h2 { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:800; margin:2rem 0 1rem; letter-spacing:-0.3px; }
.article-content h3 { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; margin:1.5rem 0 0.75rem; }
.article-content p { font-size:1rem; color:var(--texto-secundario); line-height:1.85; margin-bottom:1.2rem; font-weight:300; }
.article-content ul { margin:1rem 0 1.5rem 1.5rem; }
.article-content ul li { font-size:0.95rem; color:var(--texto-secundario); line-height:1.7; margin-bottom:0.5rem; }
.article-tip { background:var(--verde-palido); border-left:4px solid var(--verde-claro); padding:1rem 1.5rem; border-radius:0 12px 12px 0; margin:1.5rem 0; font-size:0.95rem; color:var(--negro); line-height:1.6; }

/* ANIMACIONES */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* TOAST */
#toast {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--negro); color:var(--blanco);
  padding:14px 28px; border-radius:40px;
  font-size:0.9rem; font-weight:500;
  transition:transform .3s;
  z-index:999;
}

/* RESPONSIVO */
@media(max-width:768px) {
  .nav-links { display:none; }
  .menu-btn { display:block; }
  .hero h1 { font-size:2.4rem; letter-spacing:-1px; }
  .hero-stats { flex-wrap:wrap; gap:1.5rem; }
  .contacto-grid { grid-template-columns:1fr; gap:3rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .nosotros-split { grid-template-columns:1fr; }
  .precios-grid { grid-template-columns:1fr; }
}

/* ===== MOBILE FIXES ===== */

/* Fix nav: evitar que el hamburger se salga */
nav {
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

@media(max-width:768px) {
  nav {
    padding: 0 4%;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Menú desplegable ocupa todo el ancho */
  .nav-links {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }

  /* Fix proceso: apilar verticalmente en móvil */
  .paso {
    grid-template-columns: 60px 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }

  .paso-num {
    font-size: 2.2rem;
  }

  /* Fix secciones que se desbordaban */
  section {
    padding: 60px 4%;
    overflow-x: hidden;
  }

  .hero {
    padding: 90px 4% 60px;
    overflow-x: hidden;
  }

  .page-header {
    padding: 90px 4% 50px;
  }

  /* Fix hero stats en móvil */
  .hero-stats {
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
  }

  .stat-num {
    font-size: 1.6rem;
  }

  /* Fix footer en móvil */
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  /* Fix servicios grid 2x2 en móvil */
  .services-grid.grid-2x2 {
    grid-template-columns: 1fr;
  }

  /* Fix dark section padding */
  .dark-section {
    padding: 60px 4%;
  }

  /* Fix cta-band */
  .cta-band {
    padding: 60px 4%;
  }
}

/* Grids inline convertidos a clases para control móvil */
.proceso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.texto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

@media(max-width:768px) {
  .proceso-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .texto-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Grid "Qué es el SEO" y "Para quién es" — texto + panel lateral */
.split-grid-3-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
  align-items: start;
}
.split-grid-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
/* Grid iconos de sectores dentro de "Para quién es" */
.sectores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media(max-width:768px) {
  .split-grid-3-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split-grid-1-1 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Los iconos de sectores se pueden quedar en 2 columnas en móvil,
     tienen suficiente espacio y se ven bien */
  .sectores-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  /* El botón CTA ocupa todo el ancho en móvil */
  .btn-primary, .btn-outline {
    width: 100%;
    text-align: center;
    display: block;
  }
}