/*
Theme Name:     Kadence Child Makuyen
Theme URI:      https://makuyen.cl
Description:    Child theme de Kadence para Makuyen V2. El sistema visual (tipografía, paleta, espaciado, radios) vive en theme.json. Este archivo style.css solo existe porque WordPress lo exige para reconocer un child theme y para alojar utilidades visuales puntuales (placeholders, ajustes finos de patterns Makuyen) que no caben en theme.json.
Author:         Makuyen
Template:       kadence
Version:        0.3.0
Text Domain:    kadence-child-makuyen
*/

/* ============================================================
   Placeholders explícitos para activos visuales pendientes.
   Regla cerrada (SISTEMA-DISENO.md §6): los packs y fichas Makuyen
   nunca usan ilustraciones que pretendan ser el producto. Mientras
   no haya foto real, se muestra una caja con label explícito.
   ============================================================ */

.makuyen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background-color: #FBF8F5;
    border: 1px dashed #954C78;
    border-radius: 12px;
    color: #5A5560;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    aspect-ratio: 1 / 1;
}

.makuyen-placeholder--wide {
    aspect-ratio: 4 / 3;
}

.makuyen-placeholder--portada {
    aspect-ratio: 4 / 5;
}

.makuyen-placeholder__label {
    font-weight: 600;
    color: #954C78;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 6px;
}

/* ============================================================
   Phosphor Icons — ajuste fino para sentar el icono en línea con
   texto DM Sans. Phosphor hereda currentColor por defecto.
   ============================================================ */

.makuyen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: -0.125em;
}

.makuyen-icon i {
    font-size: 1.25em;
}

/* ============================================================
   Chips de resumen (fichas + packs).
   ============================================================ */

.makuyen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.makuyen-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: #FFFFFF;
    border: 1px solid #E7E3EA;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    color: #1F1B24;
}

/* ============================================================
   Badge "Recomendada para empezar" (comparativas y packs).
   ============================================================ */

.makuyen-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #E5F4EF;
    color: #2C8C74;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ============================================================
   Bloque "marca aliada" — usado en fichas de termómetros importados.
   Comunica que el logo del fabricante visible es feature, no bug.
   ============================================================ */

.makuyen-marca-aliada {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background-color: #F7E4EE;
    border-radius: 12px;
    color: #6F385A;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.makuyen-marca-aliada strong {
    color: #6F385A;
    font-weight: 600;
}

/* ============================================================
   FAQ acordeón — estilizado liviano usando <details>/<summary>.
   ============================================================ */

.makuyen-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.makuyen-faq details {
    border-bottom: 1px solid #E7E3EA;
    padding: 16px 0;
}

.makuyen-faq details:last-child {
    border-bottom: none;
}

.makuyen-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1F1B24;
}

.makuyen-faq summary::-webkit-details-marker {
    display: none;
}

.makuyen-faq summary::after {
    content: "+";
    font-family: "DM Serif Display", serif;
    font-size: 24px;
    color: #954C78;
    transition: transform 0.2s ease;
    line-height: 1;
}

.makuyen-faq details[open] summary::after {
    content: "−";
}

.makuyen-faq__answer {
    margin-top: 12px;
    font-family: "DM Sans", system-ui, sans-serif;
    color: #5A5560;
    line-height: 1.6;
}

/* ============================================================
   Refuerzo de body — Kadence pinta el body desde su Customizer
   y a veces lo deja blanco/azulado por default. Esto es cinturón.
   La fuente de verdad sigue siendo Customizer (Colores → Site Body).
   ============================================================ */

body.wp-singular,
body.archive,
body.search,
body.home,
body.wp-admin-bar-front-end-active {
    background-color: #FBF8F5;
}

/* ============================================================
   Newsletter del footer — formulario editorial limpio.
   ============================================================ */

.makuyen-newsletter {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.makuyen-newsletter input[type="email"] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid #E7E3EA;
    background-color: #FFFFFF;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 14px;
    color: #1F1B24;
    outline: none;
    transition: border-color 0.2s ease;
}

.makuyen-newsletter input[type="email"]:focus {
    border-color: #954C78;
}

.makuyen-newsletter button {
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid #3AAE91;
    background-color: #3AAE91;
    color: #FFFFFF;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.makuyen-newsletter button:hover {
    background-color: #2C8C74;
    border-color: #2C8C74;
}

@media (max-width: 600px) {
    .makuyen-newsletter {
        flex-direction: column;
    }
}

/* ============================================================
   Lista de enlaces del footer — limpia, sin bullets, gap respirable.
   ============================================================ */

.makuyen-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.makuyen-footer-links li {
    margin: 0;
    padding: 0;
}

.makuyen-footer-links a {
    color: #5A5560;
    text-decoration: none;
    transition: color 0.2s ease;
}

.makuyen-footer-links a:hover {
    color: #954C78;
}

/* ============================================================
   Redes sociales del footer — chips livianos con icono Phosphor.
   ============================================================ */

.makuyen-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
}

.makuyen-social li {
    margin: 0;
}

.makuyen-social a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5A5560;
    text-decoration: none;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    transition: color 0.2s ease;
}

.makuyen-social a:hover {
    color: #954C78;
}

.makuyen-social i {
    font-size: 18px;
}

@media (max-width: 768px) {
    .makuyen-social {
        justify-content: flex-start;
        margin-top: 16px;
    }
}

/* ============================================================
   Sistema de botones Makuyen — hover / active / focus.
   Resuelve la deuda menor heredada de sesión 21 sobre la
   perceptibilidad del hover (gatillo B: deuda menor que reaparece
   antes de Tanda 3). Capa única, child theme, sin tocar theme.json
   ni Customizer ni patterns. Solo afecta botones de bloque Gutenberg
   (.wp-block-button__link) — NO toca botones WooCommerce, checkout,
   carrito ni formularios HTML nativos.

   Tokens usados (todos ya existentes en theme.json):
   --wp--preset--color--makuyen-verde
   --wp--preset--color--makuyen-verde-oscuro
   --wp--preset--color--makuyen-vino
   --wp--preset--color--makuyen-vino-oscuro
   --wp--preset--color--makuyen-rosa-claro
   --wp--preset--color--makuyen-blanco
   ============================================================ */

/* Primario — variante rellena (default, sin .is-style-outline). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
    background-color: var(--wp--preset--color--makuyen-verde);
    border: 1px solid var(--wp--preset--color--makuyen-verde);
    color: var(--wp--preset--color--makuyen-blanco);
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    box-shadow: none;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
    /* !important vence a `.has-makuyen-verde-background-color { … !important }`
       aplicada por la clase inline del pattern al elemento. Sin !important,
       el fondo queda fijo en Verde Makuyen y nunca oscurece en hover.
       Computed verificado en staging sesión 25. */
    background-color: var(--wp--preset--color--makuyen-verde-oscuro) !important;
    border-color: var(--wp--preset--color--makuyen-verde-oscuro);
    color: var(--wp--preset--color--makuyen-blanco);
    transform: translateY(-1px);
    box-shadow: none;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:active {
    /* !important: misma razón que en :hover. */
    background-color: var(--wp--preset--color--makuyen-verde-oscuro) !important;
    border-color: var(--wp--preset--color--makuyen-verde-oscuro);
    color: var(--wp--preset--color--makuyen-blanco);
    transform: translateY(0);
    box-shadow: none;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--makuyen-verde-oscuro);
    outline-offset: 3px;
}

/* Secundario — variante outline vino. */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--makuyen-vino);
    color: var(--wp--preset--color--makuyen-vino);
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
    /* !important en las 3 propiedades:
       - background-color: vence override Gutenberg/Kadence que fija
         `background: transparent` en `.is-style-outline` con prioridad.
       - color: vence `.has-makuyen-vino-color { … !important }` aplicada
         por la clase inline del pattern.
       - border-color: vence `.has-makuyen-vino-border-color { … !important }`
         aplicada por la clase inline del pattern.
       Computed verificado en staging sesión 25. */
    background-color: var(--wp--preset--color--makuyen-rosa-claro) !important;
    border-color: var(--wp--preset--color--makuyen-vino-oscuro) !important;
    color: var(--wp--preset--color--makuyen-vino-oscuro) !important;
    transform: translateY(-1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active {
    /* !important: misma razón que en :hover. */
    background-color: var(--wp--preset--color--makuyen-rosa-claro) !important;
    border-color: var(--wp--preset--color--makuyen-vino-oscuro) !important;
    color: var(--wp--preset--color--makuyen-vino-oscuro) !important;
    transform: translateY(0);
}

.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--makuyen-vino);
    outline-offset: 3px;
}

/*
   Observación futura (no abrir ahora):
   Evaluar si el sistema necesita tokens de estado active
   (p. ej. makuyen-verde-profundo, makuyen-rosa-profundo) cuando
   se revise la paleta extendida en SISTEMA-DISENO.md §3. Hoy active
   replica hover; queda registrado como deuda de evaluación.
*/

/* ============================================================
   Caminos de entrada — igualar altura de cards (sesión 33).
   El <style> embebido del pattern home-caminos-de-entrada ya define
   grid + align-items:stretch + margin-top:auto, y en entorno limpio
   las cards quedan parejas (verificado por render local). Pero en
   staging la inyección de CSS de Kadence padre vence ese <style>
   embebido. Re-afirmamos las declaraciones de layout con !important
   quirúrgico (mismo criterio que el sistema de botones, sesión 25).
   Scopeado a .makuyen-caminos: cubre Home y «Empieza aquí» a la vez.
   Solo layout: no toca copy, HTML vivo, PHP ni patterns.
   ============================================================ */
.makuyen-caminos .makuyen-caminos__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
}
.makuyen-caminos .makuyen-camino {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
@media (max-width: 760px) {
    .makuyen-caminos .makuyen-caminos__grid {
        grid-template-columns: 1fr !important;
    }
}