/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: Arial, sans-serif; background:#f2f2f2; color:#333; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ===== Wrapper ===== */
.wrapper {
  max-width:960px; margin:0 auto 40px; background:#fff; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.1); overflow:hidden; padding-bottom:40px;
}

/* ===== Nav ===== */
nav { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:20px 40px; }
nav .logo img { width:100px; height:auto; }
nav ul { display:flex; gap:30px; }
nav a { font-weight:bold; font-size:.95rem; color:#333; }
nav a:hover { color:#2c3e50; }

/* ===== Header ===== */
header { padding:60px 40px 40px; }
.header-content { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
@media (min-width:768px){ .header-content{ flex-direction:row; text-align:left; } }
.profile-img { width:400px; height:400px; border-radius:50%; object-fit:cover; }
.intro h1 { font-size:2.5rem; margin-bottom:10px; color:#2c3e50; }
.subtitle { font-size:1.2rem; font-style:italic; color:#555; margin-bottom:10px; }
.tagline { font-size:1rem; color:#666; margin-bottom:20px; }
.btn { padding:12px 24px; border-radius:6px; font-size:1rem; font-weight:bold; text-align:center; }
.btn.whatsapp { background:#1b9e48; color:#fff; }

/* ===== Divisor ===== */
.section-divider { border:none; border-top:1px solid #e0e0e0; margin:0 40px; }

/* ===== Breadcrumb (sin numeración) ===== */
.breadcrumb { font-size:.9rem; color:#555; padding:10px 40px 0; }
.breadcrumb ol { display:flex; gap:.5rem; list-style:none; flex-wrap:wrap; padding-left:0; }
.breadcrumb li + li::before { content:" / "; color:#999; }

/* ===== Sección de tema ===== */
.topic-section { display:flex; flex-direction:column; padding:40px; gap:22px; }
.topic-section .col { flex:1; padding:0 20px; }
.topic-section h2 { font-size:1.6rem; margin-bottom:10px; color:#2c3e50; }
.topic-section h3 { font-size:1.15rem; margin:12px 0 8px; color:#2c3e50; }
.topic-section p { margin-bottom:1.1em; line-height:1.6; }

/* ===== Cards ===== */
.cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:16px; margin-top:6px; margin-bottom:4px;
}
.card {
  background:#fff0f5; border:1px solid #e0e0e0; border-radius:8px; padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.card h3 { margin-bottom:8px; font-size:1.1rem; color:#2c3e50; }
.card p { color:#444; line-height:1.5; }
.card-link { display:inline-block; margin-top:10px; font-weight:bold; color:#666; transition:color .2s; }
.card-link:hover { color:#333; text-decoration:underline; }

/* ===== FAQ ===== */
.faq { padding:0 40px; }
.faq h2 { margin-bottom:12px; color:#2c3e50; }
.faq details { border:1px solid #ddd; border-radius:6px; padding:12px 16px; margin-bottom:12px; background:#fafafa; }
.faq summary { cursor:pointer; font-weight:bold; color:#333; }
.faq p { margin-top:8px; line-height:1.5; }

/* ===== WhatsApp flotante ===== */
.whatsapp-float {
  position:fixed; bottom:20px; right:20px; background:#25d366; width:60px; height:60px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:1000;
}
.whatsapp-float img { display:block; }

/* ===== Footer ===== */
footer { background:#fafafa; text-align:center; padding:20px; font-size:.9rem; color:#777; }

/* ===== Responsive ===== */
@media (max-width:767px){
  .breadcrumb{ padding:10px 20px 0; }
  .topic-section{ padding:30px 20px; gap:20px; }
  .section-divider{ margin:0 20px; }
  .faq{ padding:0 20px; }
}