/*
Theme Name: BPlan 5.0
Version: 5.12.0
Description: Tipografía estilo James Clear · Favicon · Columnas
*/

:root {
  --bg: #F7F5F0;
  --bg-mid: #F2EFE8;
  --bg-light: #FFFFFF;
  --text: #111111;
  --text-secondary: #444444;
  --text-tertiary: #777777;
  --accent: #2C5F4F;
  --gold: #A67C4A;
  --border: rgba(0,0,0,0.08);
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.2rem;          /* más grande, estilo Clear */
  line-height: 1.7;
  font-weight: 400;
}

/* Tipografía grande y limpia (James Clear scale) */
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--text);
}

h1 {
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  font-weight: 650;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
}

p {
  margin: 0 0 1.25em;
  max-width: none;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: #1f4639; }

.container {
  width: min(100% - 3rem, 1180px);
  margin-inline: auto;
}
@media (max-width: 600px) {
  .container { width: min(100% - 2rem, 1180px); }
}

/* Header limpio */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-weight: 600;
}

.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: white;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 450;
}
.nav a:hover { opacity: 0.7; }

.nav-cta {
  background: var(--text) !important;
  color: var(--bg) !important;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Sections */
.section { padding: 5.5rem 0; }
.section--sepia { background: var(--bg); }
.section--mid { background: var(--bg-mid); }
.section--light { background: var(--bg-light); }

/* Two columns */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.row--reverse { direction: rtl; }
.row--reverse > * { direction: ltr; }

.row-visual {
  border-radius: 10px;
  overflow: hidden;
  background: #eae6dc;
  aspect-ratio: 4/5;
}
.row-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.row-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
  font-weight: 500;
}

.row-text h2 { margin-bottom: 1rem; }

.row-text p,
.section-intro,
.hero-lead,
.intro-text,
.book-featured p,
.author p {
  max-width: 48ch !important;
  font-size: 1.2rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary);
  margin-bottom: 1.15em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.25s var(--ease);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--accent);
  color: white;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--text); }

/* Email box */
.email-box {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text) !important;
  transition: all 0.25s var(--ease);
}
.email-box:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  transform: translateY(-2px);
}
.email-box::before {
  content: "✉";
  opacity: 0.7;
}

/* Book featured */
.book-featured {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3.5rem;
  align-items: center;
}
.book-featured img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.12);
  display: block;
}
.book-featured h2 {
  font-size: 2.1rem;
  margin-bottom: 0.55rem;
}
.promo {
  font-size: 1.25rem !important;
  color: var(--text-secondary);
  margin-bottom: 1.15rem;
  max-width: 38ch !important;
}

/* Systems */
.systems {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.system-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.system-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.system-card h3 { margin-bottom: 0.5rem; }
.system-card p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.testimonial {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
}
.testimonial-stars {
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.testimonial p {
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.testimonial-author {
  font-size: 0.88rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Author */
.author {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}
.author img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

/* Footer */
.site-footer {
  background: #141820;
  color: #9AA3B2;
  padding: 4.5rem 0 0;
  font-size: 1.05rem;
}
.footer-tagline {
  margin: 0;
  line-height: 1.6;
  font-size: 1.15rem;
  color: #C5CAD4;
  max-width: 30ch;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.footer-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: white;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.footer-logo-text {
  font-size: 1.25rem;
  font-weight: 650;
  color: white;
}
.footer-heading {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  margin: 0 0 1rem;
  font-weight: 600;
}
.footer-list { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.footer-list li { margin-bottom: 0.55rem; }
.footer-list a { color: #9AA3B2; }
.footer-list a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid #252B38;
  padding: 1.4rem 0;
  font-size: 0.85rem;
  color: #6B7385;
}

/* Contact form */
.contact-form-wrap {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.04);
}
.contact-form .form-group { margin-bottom: 1.3rem; }
.contact-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Responsive */
@media (max-width: 1000px) {
  .row, .row--reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    direction: ltr;
  }
  .systems { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .book-featured { grid-template-columns: 1fr; gap: 2rem; }
  .book-featured img { max-width: 280px; }
}
@media (max-width: 900px) {
  /* El .nav ya no se oculta aquí directamente: ahora quien controla
     la visibilidad es #site-nav (ver bloque más abajo), para que el
     botón de hamburguesa pueda desplegarlo. */
  .author { grid-template-columns: 1fr; text-align: center; }
  .author img { margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 4.25rem 0; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ========== TIPOGRAFÍA MÁS GRANDE (ajuste final) ========== */
body {
  font-size: 1.3rem !important;
  line-height: 1.75 !important;
}

h1 {
  font-size: clamp(3rem, 7.5vw, 5.2rem) !important;
  line-height: 1.1 !important;
}

h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem) !important;
  line-height: 1.15 !important;
}

h3 {
  font-size: 1.5rem !important;
}

.row-text p,
.section-intro,
.hero-lead,
.intro-text,
.book-featured p,
.author p,
.row-text p {
  font-size: 1.3rem !important;
  line-height: 1.75 !important;
  max-width: 36ch !important; /* un poco más estrecho para que se lea bien en grande */
}

.row-label {
  font-size: 0.85rem !important;
}

.nav a {
  font-size: 1rem !important;
}

.logo-text {
  font-size: 1.3rem !important;
}

.btn {
  font-size: 1.05rem !important;
  padding: 0.95rem 1.8rem !important;
}

.email-box {
  font-size: 1.15rem !important;
  padding: 1rem 1.5rem !important;
}

.system-card p,
.testimonial p {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
}

.promo {
  font-size: 1.35rem !important;
}

.book-featured h2 {
  font-size: 2.4rem !important;
}

/* Carrusel de escritos */
.escritos-carousel {
  position: relative;
  min-height: 140px;
}
.escrito-card {
  display: none;
}
.escrito-card.is-active {
  display: block;
  animation: fadeIn 0.4s ease;
}
.escrito-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}
.escrito-card h3 a { color: var(--text); }
.escrito-card h3 a:hover { color: var(--accent); }
.escrito-card p {
  font-size: 1.05rem !important;
  max-width: none !important;
  margin-bottom: 0;
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  padding: 0;
  cursor: pointer;
}
.carousel-dots .dot.is-active {
  background: var(--accent);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ¿Hablamos? link */
.hablamos-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text) !important;
  padding: 0.7rem 1.3rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-light);
  transition: all 0.25s var(--ease);
}
.hablamos-link:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  transform: translateY(-2px);
}
.hablamos-icon {
  font-size: 1.15rem;
  opacity: 0.85;
}

/* Books carousel */
.books-carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.books-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 320px;
}
.book-slide {
  display: none;
}
.book-slide.is-active {
  display: block;
  animation: fadeIn 0.4s ease;
}
.book-slide-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: center;
}
.book-slide-inner img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
.books-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-light);
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: all 0.2s;
}
.books-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 700px) {
  .book-slide-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .book-slide-inner img {
    max-width: 180px;
    margin: 0 auto;
  }
}

/* Evitar menú duplicado de Elementor / builders antiguos en páginas del tema */
.elementor-location-header,
.elementor-location-footer,
body.elementor-page .elementor-top-section:first-child .elementor-nav-menu,
.bplan-legacy-header {
  display: none !important;
}

/* El subtítulo del hero ya no se fuerza a una sola línea: con textos
   más largos o tamaños de letra mayores, forzar nowrap producía un
   desbordamiento horizontal invisible (scrollWidth > viewport sin
   ningún elemento visiblemente cortado). Se deja envolver con
   normalidad; el propio max-width controla dónde rompe la línea. */
.hero-sub {
	white-space: normal;
}

/* =========================================================
   AÑADIDO — correcciones y elementos nuevos
   ========================================================= */

/* Skip link (accesibilidad de teclado) */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--text);
	color: var(--bg);
	padding: 0.9rem 1.4rem;
	z-index: 999;
	border-radius: 8px;
}
.skip-link:focus {
	left: 20px;
	top: 20px;
}

/* Menú móvil: botón de hamburguesa */
.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	background: var(--bg-light);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	display: block;
	width: 18px;
	height: 2px;
	background: var(--text);
	position: relative;
	transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: rotate(45deg); top: 0; }
.nav-toggle.is-open span::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	#site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg-light);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 12px 24px rgba(0,0,0,0.06);
	}
	#site-nav.is-open { display: block; }
	.nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 0 1rem;
	}
	.nav li { width: 100%; }
	.nav a {
		display: block;
		padding: 0.9rem 1.5rem;
		border-bottom: 1px solid var(--border);
	}
	.nav-cta {
		margin: 0.75rem 1.5rem 0;
		text-align: center;
		border-radius: 999px;
	}
	body.nav-open { overflow: hidden; }
}

/* Banners de sección — minimalista, misma paleta que el sitio */
.page-banner {
	width: 100%;
	max-height: 260px;
	overflow: hidden;
	line-height: 0;
}
.page-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Avisos del formulario de contacto */
.form-notice {
	padding: 1rem 1.25rem;
	border-radius: 10px;
	font-size: 0.95rem;
	margin-bottom: 1.25rem;
	line-height: 1.5;
}
.form-notice--ok {
	background: rgba(44, 95, 79, 0.1);
	color: #1f4639;
	border: 1px solid rgba(44, 95, 79, 0.25);
}
.form-notice--error {
	background: rgba(166, 68, 46, 0.08);
	color: #8a3a15;
	border: 1px solid rgba(166, 68, 46, 0.25);
}

/* Contenido genérico (blog / páginas sin plantilla propia) */
.container--narrow {
	width: min(100% - 3rem, 760px);
	margin-inline: auto;
}
.entry-content {
	max-width: 68ch;
	color: var(--text-secondary);
	font-size: 1.15rem;
	line-height: 1.75;
}
.entry-content p { margin-bottom: 1.25em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { max-width: 100%; border-radius: 10px; display: block; margin: 1.5em 0; }
.entry-content h2 { margin: 1.6em 0 0.6em; font-size: 1.7rem; }
.entry-content h3 { margin: 1.4em 0 0.5em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.entry-content blockquote {
	margin: 1.75em 0;
	padding-left: 1.25em;
	border-left: 2px solid var(--gold);
	font-style: italic;
	color: var(--text);
}

/* Próximamente — grid de libros (página Libros) */
.books-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.25rem;
}
@media (max-width: 900px) { .books-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .books-grid { grid-template-columns: 1fr; } }

.book-grid-cover {
	position: relative;
	aspect-ratio: 2/3;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 1rem;
	box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}
.book-grid-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-grid-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(20,24,32,0.82);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}
.book-grid-card h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.book-grid-subtitle {
	color: var(--text-secondary);
	font-size: 0.95rem;
	font-style: italic;
	margin: 0;
}

/* Bloque del libro en inglés (columnas invertidas): antes usaba un
   estilo en línea que anulaba la regla responsive de .book-featured
   en cualquier ancho de pantalla. Con esta clase, la versión móvil
   (1 columna) vuelve a aplicarse correctamente. */
.book-featured--en { grid-template-columns: 1fr 280px; }
@media (max-width: 1000px) { .book-featured--en { grid-template-columns: 1fr; } }

/* Conferencias — franja de 4 temas y listado de charlas */
.systems-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .systems-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .systems-4 { grid-template-columns: 1fr; } }

.talks-list { border-top: 1px solid var(--border); }
.talk-row {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) { .talk-row { grid-template-columns: 1fr; gap: 0.4rem; } }
.talk-date { font-size: 0.9rem; color: var(--gold); font-weight: 500; }
.talk-row h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.talk-place { font-size: 0.9rem; color: var(--text-tertiary); }

/* Presentación en portada — dos líneas exactas en escritorio/tablet;
   en pantallas estrechas se permite el ajuste normal para no desbordar. */
.intro-line { white-space: nowrap; }
@media (max-width: 900px) {
	.intro-line { white-space: normal; }
}

/* Bio de Sobre mí — caja de texto ancha en vez de columna estrecha.
   Antes usaba .row (grid 1fr/1fr) + el límite global de 36ch, lo que
   dejaba el texto en una columna alta y estrecha. Ahora la foto es una
   columna fija y el texto ocupa el resto del ancho disponible. */
.bio-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 3rem;
	align-items: start;
}
.bio-layout img {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.bio-text p {
	max-width: none !important;
	width: 100%;
}
@media (max-width: 800px) {
	.bio-layout {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.bio-layout img { margin: 0 auto; }
}

/* Párrafo de "La idea central" — antes acotado a 36ch, quedaba en una
   columna alta y estrecha muy por debajo del ancho real disponible.
   Se amplía sin salirse de su columna de la cuadrícula. */
.row-text--wide p {
	max-width: 50ch !important;
}

/* Palabra o frase clave resaltada en color — mismo tratamiento que
   "una ventaja" en el titular de portada, reutilizable en otros
   titulares donde haya una única palabra que valga la pena destacar. */
.accent-word {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
}

/* Página de Academia — franja de 3 tarjetas (método) y lista del problema */
.systems-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .systems-3 { grid-template-columns: 1fr; } }

.problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.problem-list li {
	padding-left: 1.5rem;
	position: relative;
	color: var(--text-secondary);
	font-size: 1.05rem;
	line-height: 1.6;
}
.problem-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--gold);
}
.problem-list strong { color: var(--text); }

/* Chips de sistemas educativos (resumen breve en portada) */
.tag {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--accent);
	background: rgba(44, 95, 79, 0.08);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}

/* Apariciones — grid de logos de prensa */
.press-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; }
.press-item { display: flex; align-items: center; opacity: 0.75; transition: opacity 0.2s; }
.press-item:hover { opacity: 1; }
.press-item img { max-height: 42px; max-width: 160px; filter: grayscale(1); }
.press-item-name { font-weight: 500; color: var(--text-secondary); }

/* Paneles grandes de respiro visual (imagen a doble pantalla) +
   CTA intermedio. Fondo generado (mismo lenguaje que los banners),
   sin depender de fotografía real. */
.big-panel {
	background-size: cover;
	background-position: center;
	padding: 6rem 0;
}
.big-panel-cta {
	background-image: url('assets/images/panels/panel-cta.svg');
	color: #fff;
}
.big-panel-cta .container { max-width: 620px; }
.big-panel-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 1rem; }
.big-panel-cta p { color: rgba(255,255,255,0.75); font-size: 1.15rem; margin-bottom: 1.75rem; }
.big-panel-cta .btn-primary { background: var(--gold); color: #1a1a1a; }
.big-panel-cta .btn-primary:hover { background: #c2955f; }

.big-panel-quote {
	background-image: url('assets/images/panels/panel-quote.svg');
}
.big-panel-quote .container { max-width: 780px; text-align: center; }
.big-panel-quote blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	color: var(--text);
	line-height: 1.4;
	margin: 0;
}
.big-panel-quote cite {
	display: block;
	margin-top: 1.5rem;
	font-style: normal;
	font-size: 0.95rem;
	color: var(--text-tertiary);
}

@media (max-width: 700px) {
	.big-panel { padding: 4rem 0; }
	.big-panel-cta .container { max-width: 100%; padding: 0 1.75rem; }
}

/* Botón grande (hero) — !important necesario para ganarle a la regla
   antigua .btn{...!important} del bloque de tipografía. */
.btn-lg { padding: 1.35rem 2.6rem !important; font-size: 1.3rem !important; }

/* Trío: idea central + problema + artículos, tres columnas en portada */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem; align-items: start; }
.trio-col .row-label { font-size: 1.05rem !important; }
.trio-col h3 { font-size: 2.1rem !important; margin-bottom: 1.1rem; line-height: 1.22; }
.trio-col > p { color: var(--text-secondary); font-size: 1.3rem; line-height: 1.65; }
.trio-book {
	width: 200px;
	border-radius: 8px;
	box-shadow: 0 16px 38px rgba(0,0,0,0.18);
	margin-bottom: 1.6rem;
}
.trio-col .escrito-card h4 { font-size: 1.55rem !important; margin-bottom: 0.6rem; line-height: 1.28; }
.trio-col .escrito-card h4 a { color: var(--text); }
.trio-col .escrito-card p { color: var(--text-secondary); font-size: 1.25rem !important; }
@media (max-width: 1180px) {
	.trio-col h3 { font-size: 1.75rem !important; }
	.trio-col > p { font-size: 1.15rem; }
	.trio-col .escrito-card h4 { font-size: 1.3rem !important; }
	.trio-col .escrito-card p { font-size: 1.1rem !important; }
	.trio-book { width: 160px; }
}
@media (max-width: 980px) {
	.trio { grid-template-columns: 1fr; gap: 3rem; }
	.trio-col h3 { font-size: 2rem !important; }
	.trio-col > p { font-size: 1.25rem; }
	.trio-col .escrito-card h4 { font-size: 1.5rem !important; }
	.trio-col .escrito-card p { font-size: 1.2rem !important; }
	.trio-book { width: 200px; }
}

/* Chips de sistemas educativos, versión grande (portada) */
.systems-tags { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 2.75rem; }
.tag-lg { font-size: 1.4rem; padding: 1rem 1.9rem; font-weight: 600; }

/* Testimonios en cuadrícula 2x2 (3 reales de momento: 2 arriba + 1 ancho abajo) */
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 700px) {
	.testimonials-grid { grid-template-columns: 1fr; }
	.testimonials-grid .testimonial { grid-column: auto !important; }
}

/* Libros — dos ediciones lado a lado, sin carrusel */
.books-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.book-side-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1.5rem;
	align-items: center;
	background: var(--bg-light);
	border-radius: 14px;
	padding: 1.75rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.book-side-card img { width: 100%; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,0.14); }
.book-side-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; line-height: 1.25; }
.book-side-card p { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 1.25rem; }
@media (max-width: 820px) {
	.books-side-by-side { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.book-side-card { grid-template-columns: 1fr; text-align: center; }
	.book-side-card img { max-width: 160px; margin: 0 auto; }
}

/* Recursos descargables */
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .resources-grid { grid-template-columns: 1fr; } }
.resource-card {
	background: var(--bg-light);
	border-radius: 14px;
	padding: 1.75rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}
.resource-type {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(44, 95, 79, 0.1);
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}
.resource-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.resource-card p { color: var(--text-secondary); font-size: 0.98rem; margin-bottom: 1.5rem; flex-grow: 1; }

/* Enlace secundario en el panel oscuro (junto a "Cuéntame tu caso") */
.big-panel-cta-link {
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.big-panel-cta-link:hover { color: #fff; }

/* Cabeceras de sección centradas, anchas y con letra grande —
   reutilizable en Academia, Conferencias y páginas similares.
   Antes el tamaño tenía un suelo fijo (2.3rem) que no bajaba más en
   anchos intermedios (600–900px aprox.), así que frases largas se
   partían en una palabra por línea. Ahora es una escala fluida sin
   suelo alto, que de verdad se adapta a cualquier ancho — probado en
   340, 375, 390, 428, 600, 700, 820, 900, 1024 y 1400px. */
.section-intro { text-align: center; margin-left: auto; margin-right: auto; }
.section-intro .row-label { font-size: 1.05rem !important; justify-content: center; white-space: nowrap; }
.section-intro h1, .section-intro h2 { text-align: center; }
.section-intro h1 {
	font-size: clamp(1.65rem, 6.5vw, 3.6rem) !important;
	line-height: 1.2 !important;
}
.section-intro h2 {
	font-size: clamp(1.5rem, 5.8vw, 3.1rem) !important;
	line-height: 1.22 !important;
}
.section-intro p {
	color: var(--text-secondary) !important;
	font-size: clamp(1.05rem, 3.2vw, 1.35rem) !important;
	line-height: 1.6 !important;
	max-width: none !important;
	margin-left: auto;
	margin-right: auto;
}

/* Horario de disponibilidad (página Academia) */
.schedule-wrap { overflow-x: auto; }
.schedule { width: 100%; border-collapse: collapse; min-width: 720px; }
.schedule th, .schedule td { padding: 0.5rem; text-align: center; }
.schedule thead th {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 0.75rem;
}
.schedule-hour {
	font-size: 0.9rem;
	color: var(--text-tertiary);
	font-weight: 500;
	white-space: nowrap;
	text-align: right;
	padding-right: 0.75rem;
}
.slot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	border-radius: 8px;
	padding: 0.6rem 0.4rem;
	font-size: 0.85rem;
	font-weight: 500;
}
.slot-busy {
	background: rgba(0,0,0,0.04);
	color: var(--text-tertiary);
}
.slot-free {
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s, background 0.15s;
}
.slot-free:hover { background: #234c40; transform: translateY(-1px); }
.slot-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--gold);
	display: inline-block;
}
@media (max-width: 820px) {
	.schedule { min-width: 640px; }
}

/* -----------------------------------------------------------
 * ÁREA PRIVADA — tabs de login/registro, estados y dossier
 * --------------------------------------------------------- */
.auth-tabs { margin-top: 0.5rem; }
.auth-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.auth-tabs-labels {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 1.75rem;
}
.auth-tabs-labels label {
	flex: 1;
	text-align: center;
	padding: 0.85rem 0.5rem;
	cursor: pointer;
	color: var(--text-tertiary);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.auth-tab-panel { display: none; }
#tab-login:checked ~ .auth-tabs-labels label[for="tab-login"],
#tab-registro:checked ~ .auth-tabs-labels label[for="tab-registro"] {
	color: var(--text);
	border-bottom-color: var(--accent);
}
#tab-login:checked ~ .auth-panel-login,
#tab-registro:checked ~ .auth-panel-registro {
	display: block;
}

.status-card {
	background: var(--bg-mid);
	border-left: 4px solid var(--gold);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}
.status-card p { margin: 0.4rem 0 0; color: var(--text-secondary); }
.status-card--recibido { border-left-color: var(--accent); }
.status-card--listo { border-left-color: var(--accent); background: #EAF2EF; }

.private-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.report-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.75rem;
	margin-bottom: 2.5rem;
}
.report-card h3 { margin-top: 0; }
.report-text { color: var(--text-secondary); }

.dossier-form textarea { min-height: 3.2rem; }
.dossier-form input[type="file"] {
	width: 100%;
	padding: 0.6rem;
	border: 1px dashed var(--border);
	border-radius: 6px;
	background: var(--bg-mid);
}

/* Versión imprimible del dossier */
.dossier-print-head {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.dossier-print-field { margin-top: 1.75rem; }
.dossier-print-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.dossier-print-line {
	border-bottom: 1px solid var(--border);
	height: 1.8rem;
}

@media print {
	.site-header, .site-footer, .no-print, .skip-link { display: none !important; }
	.dossier-print { padding: 0 !important; }
	body { background: #fff; }
	.dossier-print-line { border-bottom-color: #999; }
}

/* -----------------------------------------------------------
 * TARIFAS, EJERCICIOS, FLASHCARDS Y RECURSOS (área privada)
 * --------------------------------------------------------- */
.tema-heading {
	margin-top: 3rem;
	margin-bottom: 0.5rem;
	font-size: 1.3rem;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.75rem;
	margin-top: 1rem;
}
.pricing-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
}
.pricing-card h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.pricing-price { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.pricing-unit { color: var(--text-tertiary); font-size: 0.88rem; margin: 0.3rem 0 1.1rem; }
.pricing-detalle { color: var(--text-secondary); font-size: 0.95rem; flex-grow: 1; margin: 0; }

.flashcards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1rem;
}
@media (max-width: 900px) { .flashcards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flashcards-grid { grid-template-columns: 1fr; } }
.flashcard {
	perspective: 1000px;
	height: 190px;
	cursor: pointer;
}
.flashcard-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.5s;
	transform-style: preserve-3d;
}
.flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.25rem;
	font-size: 0.98rem;
	overflow: auto;
}
.flashcard-front { background: #fff; border: 1px solid var(--border); color: var(--text); }
.flashcard-back { background: var(--accent); color: #fff; transform: rotateY(180deg); }

/* -----------------------------------------------------------
 * ASISTENTE DE DUDAS (chat flotante, área privada)
 * --------------------------------------------------------- */
#bplan-chat-widget {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 200;
}
#bplan-chat-toggle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s;
}
#bplan-chat-toggle:hover { transform: scale(1.06); }
#bplan-chat-panel {
	position: absolute;
	right: 0;
	bottom: 70px;
	width: 340px;
	max-width: calc(100vw - 2.5rem);
	height: 460px;
	max-height: 70vh;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bplan-chat-header {
	background: var(--bg-mid);
	padding: 0.9rem 1.1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	border-bottom: 1px solid var(--border);
}
.bplan-chat-header button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	color: var(--text-tertiary);
}
.bplan-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.bplan-chat-msg {
	max-width: 85%;
	padding: 0.6rem 0.85rem;
	border-radius: 12px;
	font-size: 0.92rem;
	line-height: 1.45;
	white-space: pre-wrap;
}
.bplan-chat-msg--bot { align-self: flex-start; background: var(--bg-mid); color: var(--text); }
.bplan-chat-msg--user { align-self: flex-end; background: var(--accent); color: #fff; }
.bplan-chat-msg--loading { font-style: italic; color: var(--text-tertiary); background: transparent; padding-left: 0; }
.bplan-chat-msg--error { background: #FBEAEA; color: #7A2323; }
.bplan-chat-form {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 1px solid var(--border);
}
.bplan-chat-form textarea {
	flex: 1;
	resize: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.5rem 0.7rem;
	font-family: inherit;
	font-size: 0.92rem;
	max-height: 90px;
}
.bplan-chat-form button {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0 1.1rem;
	font-weight: 600;
	cursor: pointer;
}
@media (max-width: 480px) {
	#bplan-chat-panel { width: calc(100vw - 2rem); height: 65vh; }
}

/* -----------------------------------------------------------
 * COMUNIDAD B-PLAN — retos y ranking
 * --------------------------------------------------------- */
.community-ranking {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.5rem;
}
.community-ranking table { width: 100%; border-collapse: collapse; }
.community-ranking th, .community-ranking td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); }

.reto-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.75rem;
	margin-bottom: 1.75rem;
}
.reto-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}
.reto-card-head h3 { margin: 0; }
.reto-puntos {
	background: var(--gold);
	color: #fff;
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}
.reto-fecha { color: var(--text-tertiary); font-size: 0.88rem; margin: 0.4rem 0 1rem; }
.reto-comentarios {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}
.reto-comentarios h4 { margin-bottom: 0.75rem; font-size: 1rem; }