/* ============================================================
   Josefin Sans — fuente geométrica thin para slogan artisanal
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;300;400&display=swap');


/* ============================================================
   LUXE PALETAS — Color override coral #d4604f
   ============================================================ */
:root { --primary: #d4604f; --secondary: #c04438; }

html .text-color-primary, html .text-primary { color: #d4604f !important; }
html .text-color-hover-primary:hover, html .text-hover-primary:hover { color: #c04438 !important; }
a { color: #d4604f; }
a:hover, a:focus { color: #c04438; }
.nav-link { color: #d4604f; }
.nav-link:hover, .nav-link:focus { color: #c04438; }
.nav-pills > li.active > a, .nav-pills .nav-link.active { background-color: #d4604f; }
.nav-pills > li.active > a:hover, .nav-pills .nav-link.active:hover,
.nav-pills > li.active > a:focus, .nav-pills .nav-link.active:focus { background-color: #c04438; }
@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a { color: #d4604f; }
    #header .header-nav-main nav > ul > li.open > a,
    #header .header-nav-main nav > ul > li:hover > a { background: #d4604f; color: #FFF; }
    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { border-top-color: #d4604f; }
    #header .header-nav-main nav > ul:not(:hover) > li > a.active { background-color: #d4604f; color: #FFF; }
    #header .header-nav-main nav > ul > li > a.active { color: #af2b18 !important; }
    #header .header-nav-main nav > ul > li > a.active:before { border-color: #d4604f; }
    #header .header-nav-main nav > ul > li:hover > a.active,
    #header .header-nav-main nav > ul > li.open > a.active { color: #FFF !important; }
}
@media (max-width: 991px) {
    #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: #d4604f; }
    #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active { background: #d4604f; color: #FFF; }
}
#header .header-btn-collapse-nav { background: #d4604f; }
html .svg-fill-color-primary { fill: #d4604f !important; }
html .svg-fill-color-primary svg path, html .svg-fill-color-primary svg rect,
html .svg-fill-color-primary svg line, html .svg-fill-color-primary svg polyline,
html .svg-fill-color-primary svg polygon { fill: #d4604f !important; }
html .svg-fill-color-hover-primary:hover { fill: #d4604f !important; }
.btn-link { color: #d4604f; }
.btn-link:hover { color: #c04438; }
.btn-gradient:not(.btn-outline) { background: linear-gradient(135deg,#d4604f 0%,#c04438 80%) !important; color:#FFF; }
.btn-gradient:not(.btn-outline):hover { background: linear-gradient(135deg,#e0705f 0%,#cc5040 80%) !important; color:#FFF; }
.sort-source.sort-source-style-3 > li.active > a { border-bottom-color:#d4604f !important; color:#d4604f !important; }
.thumb-info .thumb-info-type, .thumb-info .thumb-info-action-icon,
.thumb-info-social-icons a, .thumbnail .zoom, .img-thumbnail .zoom,
.thumb-info-ribbon { background-color:#d4604f; }
a.custom-link-effect-1, .custom-link-effect-1 { color:#d4604f !important; }
.alternative-font { color:#d4604f; }
.btn.custom-btn-style-1 { border:1px solid rgba(56,63,72,0.2); }
.btn.custom-btn-style-1:hover { background:rgba(56,63,72,0.1); }
.btn.custom-btn-style-1._color-2 { border:1px solid rgba(212,96,79,0.5); }
.btn.custom-btn-style-1._color-2:hover { background:rgba(212,96,79,0.4); }
.thumb-info.custom-thumb-info-style-1 .thumb-info-wrapper:after { background-color:rgba(212,96,79,0.8); }


/* ============================================================
   ARTISAN POPS BANNER
   El FONDO (waves) es full-width.
   El CONTENIDO respeta el ancho del container del sitio,
   igual que el resto de secciones (max-width + margin:auto).
   ============================================================ */

/* Sección: fondo full-width con ondas animadas */
#artisan-banner.artisan-banner-section {
    position: relative;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 360px;
    background-color: #fce07a;

    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23e87888' stop-opacity='.45' offset='0%25'/%3e%3cstop stop-color='%23e87888' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23f08898' stop-opacity='.30' offset='0%25'/%3e%3cstop stop-color='%23f08898' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23f8b8c8' stop-opacity='.15' offset='0%25'/%3e%3cstop stop-color='%23f8b8c8' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e");

    background-repeat: repeat-x;
    background-size: 1600px 110px, 1600px 90px, 1600px 72px;
    background-position: 0 bottom, -50px bottom, 500px bottom;
    animation: artisanWaves 20s linear infinite;
}

@keyframes artisanWaves {
    to { background-position: 1600px bottom, 3150px bottom, 5300px bottom; }
}


/* ── Contenedor interno: respeta los LÍMITES del sitio ───────
   max-width + margin:auto = mismo comportamiento que .container
   El fondo sigue siendo full-width, solo el CONTENIDO se centra. */
.artisan-banner-inner {
    display: flex;
    flex-direction: row;
    align-items: center;          /* texto al 50% vertical = zona amarilla */
    justify-content: center;
    min-height: 360px;
    width: 100%;
    max-width: 1200px;            /* ← mismo ancho que .container del sitio */
    margin: 0 auto;               /* ← centrado horizontal como resto de secciones */
    padding: 0 30px;
    position: relative;
    z-index: 2;
    gap: 40px;
    overflow: visible;
}


/* ── Mascota: anclada al fondo, desborda arriba ─────────── */
.artisan-mascot-col {
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    flex-shrink: 0;
    overflow: visible;
}

.artisan-mascot-img {
    display: block;
    height: 420px;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
}


/* ── Texto: centrado en el espacio disponible ───────────── */
.artisan-slogan-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;                 /* permite que flex item no desborde */
}

.artisan-slogan-text {
    font-family: 'Josefin Sans', 'Raleway', 'Gill Sans', sans-serif;
    font-weight: 300;
    /* Tamaño que cabe dentro del container sin desbordarse */
    font-size: clamp(1.3rem, 2.8vw, 2.4rem);
    letter-spacing: 0.22em;
    word-spacing: 0.08em;
    color: #d4604f;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.35;
    text-align: center;
    white-space: normal;          /* permite wrap si es necesario */
}


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
    .artisan-banner-inner { max-width: 960px; }
    .artisan-mascot-img { height: 360px; }
    .artisan-slogan-text { font-size: clamp(1.2rem, 2.5vw, 2rem); letter-spacing: 0.18em; }
}

@media (max-width: 991px) {
    #artisan-banner.artisan-banner-section {
        min-height: 300px;
        background-size: 1600px 90px, 1600px 75px, 1600px 60px;
    }
    .artisan-banner-inner { max-width: 720px; min-height: 300px; gap: 24px; padding: 0 20px; }
    .artisan-mascot-img { height: 300px; }
    .artisan-slogan-text { font-size: clamp(1rem, 3vw, 1.7rem); letter-spacing: 0.14em; }
}

@media (max-width: 640px) {
	#artisan-banner.artisan-banner-section {
		min-height: 120px;
		background-size: 1600px 70px, 1600px 58px, 1600px 46px;
	}
	.artisan-banner-inner {
		flex-direction: row;          /* imagen a la IZQUIERDA, siempre */
		align-items: center;
		justify-content: flex-start;
		min-height: 120px;
		gap: 12px;
		padding: 8px 14px;
		max-width: 100%;
	}
	.artisan-mascot-col {
		align-self: flex-end;
		flex-shrink: 0;
	}
	.artisan-mascot-img  { height: 200px; }
	.artisan-slogan-text {
		font-size: clamp(0.65rem, 3.4vw, 0.95rem);
		letter-spacing: 0.08em;
		white-space: nowrap;          /* fuerza una sola línea */
		text-align: left;
	}
}

#portfolio .border{
    transition:.3s;
    cursor:pointer;
    background:#fff;
}

#portfolio .border:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    border-color:#ff7d7d !important;
}

#portfolio .rounded-4{
    border-radius:22px;
}

#portfolio .bg-light{
background:#fff8f8 !important;
}

#portfolio h3{
color:#3b281d;
}

/* ============================================================
   MOBILE FIXES — corrige margin negativo del layout del tema
   .body (y .main) tienen margin-top negativo heredado del
   one-page-agency layout: en desktop el header flota al fondo
   del hero, en móvil eso no aplica y corta el slider.
   ============================================================ */
@media (max-width: 767px) {
	.body { margin-top: 0 !important; }
	
}