/* ==========================================================================
   Letras Bonitas — Ajustes visuales del tema
   --------------------------------------------------------------------------
   Pégalo en Apariencia → Personalizar → CSS adicional.
   Solo presentación: no toca plantillas ni funcionalidad.

   Usa selectores estándar de WordPress (.site-header, .entry-content, etc.)
   con alternativas comunes. Si el tema usa otras clases, ajusta los
   selectores de las secciones 5–7.

   Paleta "atardecer": violeta #7c3aed (marca) · fucsia #d946ef y
   fucsia profundo #a21caf (calidez, AA 6.32:1) · coral #ff6b5e
   (decorativo) · rosa #f0abfc · tinta #1f2430 · fondo cálido #fffdf9
   ========================================================================== */

/* ---------- 1. Base ---------- */
body {
    background: #fffdf9;
    color: #1f2430;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection { background: #ddd0f9; color: #2e1065; }

/* foco visible global, elegante */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- 2. Tipografía y encabezados ---------- */
h1, h2, h3, h4,
.entry-title, .page-title,
.wp-block-heading {
    color: #1f2430;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

h1, .entry-title, .page-title { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); }
h4 { font-size: 1.1rem; }

/* subtítulo de sección con acento violeta */
.entry-content h2 {
    padding-bottom: .45rem;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #7c3aed, #d946ef, transparent) 1;
}

/* título de la portada con degradado de marca (opcional, quítalo si no te gusta) */
body.home .entry-title,
body.home h1.wp-block-post-title {
    background: linear-gradient(100deg, #5b21b6 5%, #7c3aed 45%, #d946ef 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 3. Enlaces ---------- */
a { color: #6d28d9; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #a21caf; text-decoration-thickness: 2px; }

.entry-content a:not(.wp-block-button__link):not(.lbg-btn) {
    font-weight: 600;
}

/* ---------- 4. Botones ---------- */
.wp-block-button__link,
.wp-element-button,
button:not(.lbg-btn):not(.lbg-chip):not(.lbs-btn):not(.lbg-fav),
input[type="submit"] {
    border-radius: 999px;
    font-weight: 700;
}

.wp-block-button__link,
.wp-element-button,
input[type="submit"] {
    background: linear-gradient(135deg, #7c3aed 0%, #a21caf 100%);
    color: #fff;
    padding: .75rem 1.6rem;
    border: 0;
    box-shadow: 0 4px 14px rgba(162, 28, 175, .3);
    transition: filter .18s ease, transform .15s ease, box-shadow .18s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff;
}

/* ---------- 5. Cabecera ---------- */
.site-header, header.site-header, #masthead {
    background: rgba(255, 253, 249, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #efe8fb;
}

/* título del sitio: "Letras" oscuro + "Bonitas" violeta si el tema lo permite */
.site-title a, .site-branding a {
    color: #1f2430;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.site-title a:hover { color: #6d28d9; }

/* logo: tamaño comedido */
.custom-logo, .site-logo img { max-height: 52px; width: auto; }

/* navegación */
.main-navigation a, .site-header nav a, #site-navigation a {
    color: #3f3a4d;
    font-weight: 600;
    border-radius: 999px;
    padding: .45rem .95rem;
}
.main-navigation a:hover, .site-header nav a:hover {
    color: #5b21b6;
    background: #f3edfd;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #a21caf 100%);
}

/* ---------- 6. Contenido ---------- */
.entry-content > p, .page-content > p { max-width: 68ch; }

.entry-content blockquote,
.wp-block-quote {
    border-left: 4px solid #7c3aed;
    background: #fffaf6;
    border-radius: 0 14px 14px 0;
    padding: 1rem 1.4rem;
    margin: 1.8rem 0;
    color: #3f3a4d;
}
.entry-content blockquote cite { color: #857c96; font-size: .85em; }

/* preguntas frecuentes (bloques detalles/acordeón) */
.entry-content details,
.wp-block-details {
    border: 1px solid #e7e0f7;
    border-radius: 14px;
    padding: .9rem 1.2rem;
    margin: 0 0 .8rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(76, 29, 149, .05);
}
.entry-content summary,
.wp-block-details summary {
    font-weight: 700;
    color: #5b21b6;
    cursor: pointer;
    list-style-position: inside;
}

/* tablas */
.entry-content table { border-collapse: separate; border-spacing: 0; width: 100%; }
.entry-content th {
    background: #f3edfd;
    color: #5b21b6;
    font-weight: 800;
    text-align: left;
    padding: .7rem 1rem;
}
.entry-content th:first-child { border-radius: 12px 0 0 0; }
.entry-content th:last-child { border-radius: 0 12px 0 0; }
.entry-content td { padding: .7rem 1rem; border-bottom: 1px solid #efe8fb; }

/* listas con viñetas de marca */
.entry-content ul:not(.lbg-filters) { list-style: none; padding-left: 0; }
.entry-content ul:not(.lbg-filters) > li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: .45rem;
}
.entry-content ul:not(.lbg-filters) > li::before {
    content: "";
    position: absolute;
    left: .2rem; top: .52em;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #d946ef, #ff6b5e);
}

/* imágenes del contenido */
.entry-content img {
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(76, 29, 149, .1);
}

/* ---------- 7. Pie de página ---------- */
.site-footer, footer.site-footer, #colophon {
    background: linear-gradient(180deg, #251244 0%, #1a0b30 55%, #2e0f2e 100%);
    color: #d9cffb;
    margin-top: 4rem;
    padding: 3rem 0 2rem;
}

.site-footer a, footer.site-footer a { color: #f0abfc; }
.site-footer a:hover { color: #fff; }

.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
    color: #fff;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.site-footer .site-info,
.site-footer .copyright {
    color: #a893d8;
    font-size: .85rem;
    border-top: 1px solid rgba(240, 171, 252, .18);
    padding-top: 1.4rem;
    margin-top: 2rem;
}

/* ---------- 8. Tarjetas de contenido (bloques Grupo con borde) ---------- */
.entry-content .wp-block-group.is-style-card {
    border: 1px solid #e7e0f7;
    border-radius: 18px;
    padding: 1.6rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 10px 30px rgba(76, 29, 149, .07);
}

/* ---------- 9. Formularios ---------- */
input[type="text"], input[type="email"], input[type="url"],
input[type="search"], textarea, select {
    border: 2px solid #e7e0f7;
    border-radius: 12px;
    padding: .65rem 1rem;
    font-family: inherit;
    color: #1f2430;
    background: #fff;
}
input:focus, textarea:focus, select:focus {
    border-color: #7c3aed;
    outline: none;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .16);
}

/* ---------- 10. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   PALETA FINAL — "Atardecer" (documentación)
   --------------------------------------------------------------------------
   #7c3aed violeta   Marca: foco, enlaces, bordes, selección, blockquotes.
   #a21caf fucsia    Texto y botones sobre claro (6.32:1 AA): degradado
   profundo          primario de botones, hover de enlaces, item de menú
                     activo, títulos de portada.
   #d946ef fucsia    Decorativo y texto grande (3.46:1): subrayados H2,
                     degradado del H1, viñetas.
   #ff6b5e coral     Decorativo cálido, nunca con texto (2.79:1): puntas de
                     degradados y viñetas.
   #f0abfc rosa      Heredado del favicon: enlaces del footer.
   #fffaf6           Papel cálido para citas (blockquotes).
   Pie: degradado ciruela profundo #251244 -> #1a0b30 -> #2e0f2e.
   Todo texto cumple WCAG AA; el fucsia/coral brillantes solo aparecen
   donde no hay texto que leer o en texto grande (>=3:1).
   ========================================================================== */