/*
Theme Name: Libro de Oratoria
Template: twentytwentyfour
Version: 1.0.0
Description: Tema ligero para librodeoratoria.com, con la identidad de fermiralles.com (Poppins, violeta, bloques negro y violeta). Sin constructores.
Author: Saber Comunicar
Text Domain: librodeoratoria
*/

/* Antetítulo en cursiva serif, como en fermiralles.com */
.lo-eyebrow { font-family: var(--wp--preset--font-family--cardo); font-style: italic; font-size: 1.15rem; color: var(--wp--preset--color--muted); margin: 0 0 .35rem; }
.lo-eyebrow.on-dark { color: #C9C2FF; }

/* Etiqueta redonda (pastilla) */
.lo-pill { display: inline-block; border: 1.5px solid var(--wp--preset--color--violet); color: var(--wp--preset--color--violet); border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.lo-pill.on-dark { border-color: #C9C2FF; color: #C9C2FF; }
.lo-pill.on-violet { border-color: #fff; color: #fff; }

/* Titulares: Poppins 800, mayúsculas en H2 de sección */
.lo-h2 { text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.08; }
.lo-h2.violet { color: var(--wp--preset--color--violet); }
.lo-hero h1 { line-height: 1.05; letter-spacing: -0.015em; }
.lo-hero h1 .lila { color: #A99CFF; }

/* Barra de cifras */
.lo-stats { background: var(--wp--preset--color--violet); color: #fff; }
.lo-stat strong { display: block; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.lo-stat span { display: block; font-size: .95rem; opacity: .92; margin-top: .3rem; }

/* Tarjetas de libro (negra y violeta) */
.lo-card { border-radius: 22px; padding: 2.2rem; height: 100%; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 14px 14px; }
.lo-card.dark { background-color: var(--wp--preset--color--dark); color: #fff; }
.lo-card.violet { background-color: var(--wp--preset--color--violet); color: #fff; }
.lo-card h2, .lo-card h3 { color: #fff; margin-top: .6rem; text-transform: uppercase; line-height: 1.1; }
.lo-card p { color: rgba(255,255,255,.88); }
.lo-card .lo-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; margin: .8rem 0 0; color: #fff; }
.lo-card .lo-price small { display: block; font-size: .85rem; font-weight: 500; opacity: .8; letter-spacing: 0; margin-top: .2rem; }
.lo-card .wp-block-image img { border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.lo-card ul { padding-left: 1.1rem; }
.lo-card li { margin-bottom: .35rem; color: rgba(255,255,255,.9); }

/* Botones: violeta, 12px, mayúsculas */
.wp-block-button__link { text-transform: uppercase; letter-spacing: .02em; }
.lo-card.dark .is-style-outline .wp-block-button__link, .lo-card.violet .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.7); }
.lo-card.violet .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--wp--preset--color--violet); }
.lo-card.violet .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--dark); color: #fff; }

/* Valoración */
.lo-rating { font-weight: 700; }
.lo-rating .stars { color: #FFB400; letter-spacing: .05em; }

/* Bloque autor (filas de cifras) */
.lo-row { background: #2C3338; color: #fff; border-radius: 14px; padding: .9rem 1.2rem; display: flex; gap: 1.2rem; align-items: center; margin: 0 0 .7rem; }
.lo-row strong { color: #A99CFF; font-size: 1.5rem; font-weight: 800; min-width: 5.2rem; flex: 0 0 auto; white-space: nowrap; }
.lo-autor img, .lo-foto-autor img { border-radius: 20px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }

/* Tabla comparativa */
.lo-tabla table { border-collapse: collapse; width: 100%; }
.lo-tabla th, .lo-tabla td { border-bottom: 1px solid #e5e5e5; padding: .8rem .6rem; text-align: left; vertical-align: top; }
.lo-tabla th { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* FAQ */
.lo-faq details { border-bottom: 1px solid #e5e5e5; padding: .9rem 0; }
.lo-faq summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.lo-faq details p { margin: .6rem 0 0; color: #444; }

/* Resumen rápido (para lectores y para IA) */
.lo-resumen { border-left: 4px solid var(--wp--preset--color--violet); background: var(--wp--preset--color--surface); border-radius: 0 14px 14px 0; padding: 1.2rem 1.4rem; }
.lo-resumen p { margin: 0 0 .4rem; }

/* Aviso de afiliado */
.lo-afiliado { font-size: .85rem; color: var(--wp--preset--color--muted); }

/* Header / footer */
.lo-header { border-bottom: 1px solid rgba(0,0,0,.06); }
.lo-header .wp-block-site-title a { text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.lo-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.lo-footer a:hover { color: #A99CFF; }
.lo-footer, .lo-footer p, .lo-footer h3 { color: #fff; }
.lo-footer .has-muted-color { color: #B8B4AD; }

@media (max-width: 781px) {
	.lo-card { padding: 1.5rem; }
	.lo-row strong { min-width: 4rem; font-size: 1.25rem; }
	.lo-hero .wp-block-columns .wp-block-columns { flex-wrap: nowrap !important; gap: .7rem; }
	.lo-hero .wp-block-columns .wp-block-columns .wp-block-column { flex-basis: 50% !important; }
}

/* === cabecera estática (sin JavaScript) === */
.ls-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
.ls-wrap { max-width: 1180px; margin: 0 auto; padding: .9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ls-brand { font-weight: 800; letter-spacing: -0.02em; color: #1D2327; text-decoration: none; white-space: nowrap; font-size: 1.05rem; }
.ls-nav { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ls-nav::-webkit-scrollbar { display: none; }
.ls-nav a { color: #1D2327; text-decoration: none; white-space: nowrap; }
.ls-nav a:hover { color: #7865FC; }
@media (max-width: 781px) {
	.ls-wrap { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .7rem 1rem; }
	.ls-nav { width: 100%; gap: 1.1rem; padding-bottom: .1rem; }
}