/* =========================================================
   Cerveza TierraBuena — sección #historia (home)
   Reskin al lenguaje visual ORIGINAL del template Ashley.
   No tarjetas con sombra: usa el vocabulario nativo del
   template (mil-suptitle, mil-about-quote, mil-img-frame +
   mil-lines-place, mil-divider, mil-link / mil-button).
   Marca: café #2b2118 · crema #f6f3ee · dorado #c8a24a
   Carga DESPUÉS de custom.css / mobile-fixes.css (gana).
   ========================================================= */

:root {
    --ctb-brown: #2b2118;
    --ctb-cream: #f6f3ee;
    --ctb-gold: #c8a24a;
    --ctb-line: rgba(43, 33, 24, 0.12);
}

/* Fondo sobrio, casi blanco con un velo crema al pie */
.ctb-historia-sec {
    background: linear-gradient(180deg, #ffffff 0%, var(--ctb-cream) 100%);
}

/* ---------------------------------------------------------
   Eyebrow / suptitle nativo (con la línea fina del template)
   --------------------------------------------------------- */
.ctb-historia-sec .mil-suptitle {
    color: rgba(43, 33, 24, 0.55);
    margin-bottom: 28px;
}

/* Divisores del template son blancos (pensados para fondo
   oscuro); en fondo claro los pasamos a marrón muy tenue */
.ctb-historia-sec .mil-divider {
    background-color: var(--ctb-line);
}

/* ---------------------------------------------------------
   Cita de fundador (mil-about-quote) — hito 40 L -> 2,000 L
   --------------------------------------------------------- */
.ctb-historia-sec .mil-quote {
    color: var(--ctb-brown);
    font-weight: 400;
}
.ctb-historia-sec .mil-quote .mil-thin {
    color: var(--ctb-gold);
    font-weight: 100;
}
/* mobile-fixes fuerza radius 28px en "section img"; el avatar
   de la cita debe seguir siendo un círculo */
.ctb-historia-sec .mil-about-quote .mil-avatar img {
    border-radius: 50% !important;
}

/* ---------------------------------------------------------
   Foto vertical (mil-about-photo + mil-img-frame + lines)
   El SVG .mil-lines lo clona main.js dentro de mil-lines-place
   --------------------------------------------------------- */
.ctb-historia-sec .mil-about-photo {
    position: relative;
}
.ctb-historia-sec .mil-about-photo .mil-lines-place {
    top: -100px;
    left: -22%;
}
/* El template presenta la foto "about" plana; quitamos la sombra
   direccional glossy que custom.css le pone, para que respire como
   en el original (el acento visual lo dan las mil-lines de fondo). */
.ctb-historia-sec .mil-about-photo .mil-img-frame {
    box-shadow: none;
}

/* ---------------------------------------------------------
   Micro-etiquetas de bloque (Casa / Club) — dorado sobrio
   --------------------------------------------------------- */
.ctb-historia-sec .mil-upper.mil-accent {
    display: block;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------
   CASA — slider 7 fotos (Swiper: class ctb-casa-slider)
   --------------------------------------------------------- */
.ctb-historia-sec .ctb-casa-slider {
    position: relative;
    overflow: hidden;
    box-shadow: none;
}
.ctb-casa-slider .swiper-slide img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------
   Layout Casa & Club: dos filas horizontales (slider+info /
   narrativa+oferta). align-items-center evita huecos muertos:
   la columna corta se centra contra la alta, no deja aire.
   --------------------------------------------------------- */
.ctb-casa-info,
.ctb-club-row .col-lg-5 {
    /* la info respira; el eyebrow arranca el bloque */
    padding-top: 4px;
}
/* En desktop las columnas van a la par: sin margen inferior heredado */
@media (min-width: 992px) {
    .mil-mb-lg-0 { margin-bottom: 0 !important; }
}
.ctb-casa-slider .swiper-pagination {
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
}
.ctb-casa-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    margin: 0 5px;
    transition: width 0.3s ease, background 0.3s ease;
}
.ctb-casa-slider .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background: var(--ctb-gold);
}

/* mobile-fixes.css oculta a.mil-link.mil-dark.mil-arrow-place (era para
   el link "volver arriba" del marco); nuestro CTA de Casa usa ese mismo
   patrón nativo, así que lo re-mostramos dentro de la sección. */
.ctb-historia-sec a.mil-link.mil-dark.mil-arrow-place {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex !important;
}

/* dirección: texto pequeño + pin dorado (mil-text-sm mil-dark-soft) */
.ctb-historia-sec .ctb-addr {
    max-width: 460px;
    line-height: 1.6;
}
.ctb-historia-sec .ctb-addr i {
    color: var(--ctb-gold);
    margin-right: 9px;
}

/* ---------------------------------------------------------
   CLUB — beneficios separados por reglas finas + precio
   --------------------------------------------------------- */
.ctb-historia-sec .ctb-club-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: block;
    max-width: 100%;
}
.ctb-historia-sec .ctb-club-beneficios li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid var(--ctb-line);
    font-size: 1.02rem;
    color: var(--ctb-brown);
}
.ctb-historia-sec .ctb-club-beneficios li:last-child {
    border-bottom: 1px solid var(--ctb-line);
}
.ctb-historia-sec .ctb-club-beneficios i {
    color: var(--ctb-gold);
    font-size: 0.8em;
    width: 14px;
    text-align: center;
    flex: 0 0 auto;
}

.ctb-club-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.ctb-club-amount {
    font-family: "Outfit", sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ctb-brown);
    letter-spacing: -0.5px;
}
.ctb-club-per {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(43, 33, 24, 0.5);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 992px) {
    .ctb-historia-sec .row.mil-mb-120 { margin-bottom: 60px !important; }
    .ctb-historia-sec .mil-about-photo { max-width: 480px; margin: 0 auto; }
    .ctb-historia-sec .mil-divider.mil-mb-90 { margin-bottom: 50px !important; }
    .ctb-casa-slider .swiper-slide img { height: 380px; }
}

@media (max-width: 768px) {
    .ctb-casa-slider .swiper-slide img { height: 300px; }
    .ctb-club-amount { font-size: 2.4rem; }
    .ctb-historia-sec .ctb-club-beneficios,
    .ctb-historia-sec .ctb-addr { max-width: 100%; }
}

/* CTB: milestone legible (reemplaza avatar-quote apretado) */
.ctb-milestone {
  border-left: 3px solid #c8a24a;
  padding: 6px 0 6px 26px;
  margin-top: 10px;
}
.ctb-milestone-nums {
  display: flex; align-items: baseline; gap: 18px;
  font-weight: 700; color: #2b2118; line-height: 1;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 12px; flex-wrap: wrap;
}
.ctb-ms-a { color: #2b2118; }
.ctb-ms-b { color: #c8a24a; }
.ctb-milestone-nums small { font-size: .45em; font-weight: 500; margin-left: 3px; }
.ctb-ms-arrow { color: #c8a24a; font-weight: 400; font-size: .8em; }
.ctb-milestone-cap { color: #6b5d4a; font-size: 1rem; line-height: 1.5; margin: 0; max-width: 360px; }

/* CTB: mantener 2 columnas en Casa desde 768px (ventanas angostas) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #casa { display: flex; flex-wrap: nowrap; align-items: center; }
  #casa > [class*="col-"] { flex: 1 1 0; max-width: none; }
  #casa > .col-lg-7 { flex: 1.3 1 0; }
}

/* =========================================================
   CLUB TierraBuena — SECCIÓN PROPIA: editorial crema
   Colocada entre "Lo más vendido" (crema) e "Historia" (crema).
   Sin banda oscura, sin tarjetas, sin glow: mismo lenguaje sobrio
   que el bloque Casa (crema · café #2b2118 · dorado #c8a24a),
   con vocabulario nativo del template (mil-suptitle, mil-button).
   ========================================================= */
.ctb-club-section {
    background: var(--ctb-cream);
    border-top: 1px solid var(--ctb-line);
    border-bottom: 1px solid var(--ctb-line);
    padding: 96px 0;
}
@media (max-width: 768px) { .ctb-club-section { padding: 64px 0; } }

/* Eyebrow: gris café con la línea fina nativa (igual que Historia) */
.ctb-club-section .mil-suptitle {
    color: rgba(43, 33, 24, 0.55);
    margin-bottom: 28px;
}

/* Beneficios: lista limpia con reglas finas + check dorado */
.ctb-club-section .ctb-club-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    max-width: 420px;
}
.ctb-club-section .ctb-club-beneficios li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--ctb-line);
    font-size: 1.05rem;
    color: var(--ctb-brown);
}
.ctb-club-section .ctb-club-beneficios li:last-child {
    border-bottom: 1px solid var(--ctb-line);
}
.ctb-club-section .ctb-club-beneficios i {
    color: var(--ctb-gold);
    font-size: 0.82em;
    width: 16px;
    text-align: center;
    flex: 0 0 auto;
}

/* Precio: café sobrio, dorado reservado al acento pequeño */
.ctb-club-section .ctb-club-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.ctb-club-section .ctb-club-amount {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    color: var(--ctb-brown);
    letter-spacing: -0.5px;
}
.ctb-club-section .ctb-club-per {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(43, 33, 24, 0.5);
}

@media (max-width: 992px) {
    .ctb-club-section .ctb-club-offer { margin-top: 10px; }
}
@media (max-width: 768px) {
    .ctb-club-section .ctb-club-beneficios { max-width: 100%; }
}

/* CTB: seccion Beber y ayudar (RSE) */
.ctb-rse-section { background: #f6f3ee; }
.ctb-rse-icon { width: 78px; height: 78px; margin: 22px auto 26px; border-radius: 50%; background: #2b2118; color: #c8a24a; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.ctb-rse-section p { font-size: 1.12rem; line-height: 1.65; color: #4a3f32; }

/* CTB: RSE mas atractiva (dentro del template) */
.ctb-rse-section { border-top: 1px solid var(--ctb-line); position: relative; }
.ctb-rse-icon { position: relative; box-shadow: 0 10px 30px rgba(43,33,24,.15); }
.ctb-rse-icon::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(200,162,74,.4); border-radius: 50%; }
.ctb-rse-section h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.ctb-rse-section .mil-suptitle { justify-content: center; }
.ctb-rse-divider { width: 60px; height: 2px; background: #c8a24a; margin: 30px auto 0; }

/* CTB: logo en seccion Club (home) */
.ctb-club-logo { height: 68px; width: auto; display: block; margin-bottom: 22px; }
@media (max-width: 768px) { .ctb-club-logo { height: 56px; margin-left: auto; margin-right: auto; } }

/* CTB: forms del FAQ club con boton debajo del fieldgroup */
.ctb-club-form .ctb-fieldgroup { margin-bottom: 16px; max-width: 440px; }