/* =========================================================
   Sistema cl- · CMC Luthier
   Capa reutilizable para páginas interiores (ver README.md).

   Reglas del sistema:
   - Todo selector empieza por una clase cl-: nada se aplica fuera
     de los bloques que llevan estas clases.
   - Sin IDs ni !important.
   - No redefine las clases antiguas (cmc-*, v2-*, glx-*, lk-*, lfs).
   - Cortes únicos: ≤600 móvil · 601–1024 tablet (valores fluidos)
     · ≥1025 escritorio.
   ========================================================= */


/* ---------- Tokens ---------- */

.cl-page,
.cl-section {
    --cl-verde: #173733;
    --cl-verde-2: #245049;
    --cl-crema: #F5EFE1;
    --cl-crema-2: #EEE6D3;
    --cl-cobre: #A9713F;
    --cl-cobre-claro: #D9A66B;   /* texto sobre verde */
    --cl-cobre-oscuro: #7A4A22;  /* texto pequeño sobre fondo claro */
    --cl-texto: #2B2A26;
    --cl-texto-2: #54524A;
    --cl-blanco: #FFFFFF;
    --cl-linea: rgba(122, 74, 34, .35);
    --cl-borde: rgba(169, 113, 63, .32);
    --cl-marco: rgba(169, 113, 63, .4);

    /* Escala de la Gramática: móvil (600px) → escritorio (1025px) */
    --cl-fs-body: clamp(18px, 6.71px + 1.88vw, 26px);
    --cl-fs-h1: clamp(32px, 5.65vw - 1.88px, 56px);
    --cl-fs-h2: clamp(28px, 5.18vw - 3.06px, 50px);
    --cl-fs-h3: clamp(24px, 12.71px + 1.88vw, 32px);
    --cl-fs-sub: clamp(17px, 7.12px + 1.65vw, 24px);
    --cl-fs-kicker: clamp(12px, 9.18px + .47vw, 14px);
    --cl-fs-note: clamp(15px, 10.76px + .71vw, 18px);

    --cl-space-section: clamp(72px, 15.53px + 9.41vw, 112px);
    --cl-space-block: clamp(28px, 6.59vw - 11.53px, 56px);
    --cl-gutter: 20px;
    --cl-w-narrow: 720px;
    --cl-w-wide: 1220px;
    --cl-radius: 4px;
}


/* ---------- Página y secciones ---------- */

.cl-page {
    margin: 0;
    padding: 0;
    max-width: none;
    color: var(--cl-texto);
}

.cl-section {
    margin: 0;
    padding: var(--cl-space-section) 0;
    background: var(--cl-blanco);
    color: var(--cl-texto);
    font-size: var(--cl-fs-body);
    line-height: 1.65;
}

.cl-section > * + * {
    margin-top: var(--cl-space-block);
}

.cl-section--blanco { background: var(--cl-blanco); }
.cl-section--crema { background: var(--cl-crema); }
.cl-section--crema-2 { background: var(--cl-crema-2); }
.cl-section--verde { background: var(--cl-verde); color: var(--cl-crema); }

.cl-narrow,
.cl-wide {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cl-gutter);
    padding-right: var(--cl-gutter);
}

.cl-narrow {
    max-width: calc(var(--cl-w-narrow) + 2 * var(--cl-gutter));
    text-align: center;
}

.cl-wide {
    max-width: calc(var(--cl-w-wide) + 2 * var(--cl-gutter));
}


/* ---------- Tipografía ---------- */

.cl-section p {
    margin: 0 0 1em;
    font-size: inherit;
    line-height: inherit;
}

.cl-section p:last-child {
    margin-bottom: 0;
}

.cl-section h1,
.cl-section h2,
.cl-section h3 {
    margin: 0 0 .5em;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cl-verde);
}

.cl-section h1 { font-size: var(--cl-fs-h1); line-height: 1.15; }
.cl-section h2 { font-size: var(--cl-fs-h2); line-height: 1.2; }
.cl-section h3 { font-size: var(--cl-fs-h3); line-height: 1.25; }

.cl-section strong { font-weight: 700; }

.cl-section p a {
    color: var(--cl-cobre-oscuro);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.cl-section--verde h1,
.cl-section--verde h2,
.cl-section--verde h3 { color: var(--cl-crema); }
.cl-section--verde strong { color: var(--cl-cobre-claro); }
.cl-section--verde p a { color: var(--cl-cobre-claro); }


/* ---------- Cabecera de sección (kicker + H2 + subtítulo + logo) ---------- */

.cl-section .cl-head {
    margin-bottom: 1.25em;
}

.cl-section .cl-head h1,
.cl-section .cl-head h2 {
    margin-bottom: .35em;
}

.cl-section .cl-kicker {
    margin: 0 0 14px;
    font-size: var(--cl-fs-kicker);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cl-cobre-oscuro);
}

.cl-section--verde .cl-kicker { color: var(--cl-cobre-claro); }

.cl-section .cl-subtitle {
    font-size: var(--cl-fs-sub);
    line-height: 1.5;
    color: var(--cl-texto-2);
}

.cl-section--verde .cl-subtitle { color: var(--cl-crema); }

/* Variante con logo (solo territorio Limbalink): logo a la izquierda, apilado en móvil */
.cl-section .cl-head--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: left;
}

.cl-section .cl-head__logo {
    flex: 0 0 auto;
    margin: 0;
}

.cl-section .cl-head__logo img {
    width: 112px;
    max-width: 100%;
    height: auto;
}


/* ---------- Hero de página interior ---------- */

.cl-section .cl-epithet {
    margin-bottom: .75em;
    font-size: var(--cl-fs-sub);
    font-style: italic;
    color: var(--cl-texto-2);
}

.cl-section .cl-lema {
    margin-bottom: .75em;
    font-size: var(--cl-fs-h3);
    line-height: 1.3;
    color: var(--cl-verde);
}


/* ---------- Imágenes ---------- */

.cl-section .wp-block-image {
    margin: 0;
}

.cl-section .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Marco fino para fotografías (no para glifos) */
.cl-section .cl-figure img,
.cl-section .cl-split__media img {
    border-radius: var(--cl-radius);
    outline: 1px solid var(--cl-marco);
    outline-offset: 8px;
}

.cl-section .cl-figure .wp-block-image img {
    width: 100%;
}

.cl-section .cl-glyph {
    margin: 0 auto 1.5em;
}

.cl-section .cl-glyph img {
    max-width: 100%;
    height: auto;
}


/* ---------- Composición dividida (imagen + texto) ---------- */

.cl-section .cl-split {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(36px, 8.47vw - 14.82px, 72px);
    align-items: center;
}

.cl-section .cl-split__text {
    text-align: left;
}

.cl-section .cl-split__text .cl-rule {
    margin-left: 0;
}


/* ---------- Separador y frase-divisoria / firma ---------- */

.cl-section .cl-rule {
    width: 56px;
    max-width: 56px;
    height: 0;
    margin: 28px auto;
    border: 0;
    border-top: 1px solid var(--cl-cobre);
    background: none;
    opacity: 1;
}

.cl-section .cl-sign {
    font-size: var(--cl-fs-sub);
    font-style: italic;
    color: var(--cl-cobre-oscuro);
}

.cl-section .cl-quote {
    max-width: 900px;
    margin: 0 auto 1em;
    font-size: var(--cl-fs-h3);
    font-style: italic;
    line-height: 1.35;
    text-align: center;
    color: var(--cl-verde);
}


/* ---------- Pareja de tarjetas ---------- */

.cl-section .cl-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    max-width: calc(1060px + 2 * var(--cl-gutter));
}

.cl-section .cl-card {
    box-sizing: border-box;
    padding: 40px 36px;
    border: 1px solid var(--cl-borde);
    border-radius: var(--cl-radius);
    background: var(--cl-crema);
    text-align: center;
}

.cl-section .cl-card h3 {
    margin-bottom: .3em;
}

.cl-section .cl-card .wp-block-image {
    margin-top: 20px;
}

/* La foto se muestra entera: sin recorte ni deformación del instrumento */
.cl-section .cl-card .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}


/* ---------- Panel crema y ficha técnica ---------- */

.cl-section .cl-panel,
.cl-section .cl-avail {
    box-sizing: border-box;
    width: min(900px, calc(100% - 2 * var(--cl-gutter)));
    margin-left: auto;
    margin-right: auto;
    padding: clamp(28px, 4.71vw, 48px) clamp(20px, 6.59vw - 19.53px, 48px);
    border-radius: var(--cl-radius);
    text-align: left;
}

.cl-section .cl-panel {
    background: var(--cl-crema);
}

.cl-section .cl-spec__row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid var(--cl-linea);
}

.cl-section .cl-spec__row:first-child {
    border-top: 1px solid var(--cl-linea);
}

.cl-section .cl-spec__row h3,
.cl-section .cl-avail h3 {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cl-cobre-oscuro);
}

.cl-section .cl-spec__row p {
    margin: 0;
}

.cl-section .cl-note {
    font-size: var(--cl-fs-note);
    line-height: 1.6;
    text-align: left;
    color: var(--cl-texto-2);
}

.cl-section .cl-spec + .cl-note {
    margin-top: 28px;
}


/* ---------- Disponibilidad y precios ---------- */

.cl-section .cl-avail {
    border: 1px solid var(--cl-borde);
    background: var(--cl-crema-2);
}

.cl-section .cl-avail h3 {
    margin: 36px 0 4px;
}

.cl-section .cl-price__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cl-linea);
}

.cl-section .cl-price__row p {
    margin: 0;
}

.cl-section .cl-price__row p:last-child {
    font-weight: 700;
    white-space: nowrap;
    color: var(--cl-verde);
}

.cl-section .cl-avail .cl-note {
    margin-top: 1em;
    margin-bottom: 0;
}


/* ---------- Galería (envuelve el slider de Otter sin modificarlo) ---------- */

.cl-section .cl-gallery {
    box-sizing: border-box;
    max-width: calc(1000px + 56px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 28px;
}

.cl-section .cl-gallery .wp-block-themeisle-blocks-slider {
    outline: 1px solid var(--cl-marco);
    outline-offset: 8px;
}

.cl-section .cl-gallery .wp-block-themeisle-blocks-slider img {
    object-fit: cover;
}


/* ---------- Cierre conversacional ---------- */

.cl-section .cl-closing__sign {
    margin-top: 28px;
    font-size: var(--cl-fs-note);
    font-style: italic;
    color: var(--cl-texto-2);
}


/* ---------- Botones (bloque Botones de WordPress) ---------- */

.cl-section .wp-block-buttons {
    gap: 14px;
}

.cl-section .wp-block-button__link {
    padding: 14px 28px;
    border: 2px solid var(--cl-verde);
    border-radius: var(--cl-radius);
    background: var(--cl-verde);
    color: var(--cl-crema);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.cl-section .wp-block-button__link:hover {
    border-color: var(--cl-verde-2);
    background: var(--cl-verde-2);
    color: var(--cl-crema);
}

.cl-section .wp-block-button__link:focus-visible {
    outline: 2px solid var(--cl-cobre-oscuro);
    outline-offset: 2px;
}

.cl-section .is-style-outline .wp-block-button__link {
    border-color: var(--cl-verde);
    background: transparent;
    color: var(--cl-verde);
}

.cl-section .is-style-outline .wp-block-button__link:hover {
    border-color: var(--cl-verde);
    background: var(--cl-verde);
    color: var(--cl-crema);
}

.cl-section--verde .wp-block-button__link {
    border-color: var(--cl-crema);
    background: var(--cl-crema);
    color: var(--cl-verde);
}

.cl-section--verde .wp-block-button__link:hover {
    border-color: var(--cl-crema-2);
    background: var(--cl-crema-2);
    color: var(--cl-verde);
}

.cl-section--verde .is-style-outline .wp-block-button__link {
    border-color: var(--cl-crema);
    background: transparent;
    color: var(--cl-crema);
}

.cl-section--verde .wp-block-button__link:focus-visible {
    outline-color: var(--cl-cobre-claro);
}

/* Botón de escucha: más discreto */
.cl-section .cl-listen .wp-block-button__link {
    padding: 11px 24px;
    font-size: 15px;
}


/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .cl-section .cl-split {
        grid-template-columns: 1fr;
    }

    .cl-section .cl-split__media img {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .cl-section .cl-duo {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cl-section .cl-card {
        padding: 28px 20px;
    }

    .cl-section .cl-spec__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cl-section .cl-head--logo {
        flex-direction: column;
        text-align: center;
    }
}