/* Chulitos custom overrides — paleta juvenil */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700;900&family=Quicksand:wght@400;700&family=Sacramento&family=Dancing+Script:wght@400;700&family=Caveat:wght@400;700&display=swap');

/* Fondo global configurable — valor por defecto #E7E7E5, sobre-escribe main.css:102 */
body, #wrapper, #main {
    background-color: var(--site-bg, #E7E7E5) !important;
}

body, input, select, textarea {
    font-family: "Nunito", "Source Sans Pro", Helvetica, sans-serif;
    color: #314658;
}

h1, h2, h3, h4, h5, h6 {
    color: #314658;
}

/* Links y hovers con rosa Chulitos */
a:hover {
    color: #f29bae !important;
}
.icon.style2:hover {
    color: #f29bae !important;
    border-color: #f29bae !important;
}

/* Tiles con border-radius, cuadradas y hover zoom (ref Phantom) */
.tiles article {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease;
}
.tiles article > .image {
    border-radius: 18px;
    height: 100%;
    overflow: hidden;
}
.tiles article > .image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.tiles article > .image:before {
    border-radius: 18px;
}
.tiles article > .image:after {
    border-radius: 18px;
}
.tiles article > a {
    border-radius: 18px;
    overflow: hidden;
}
body:not(.is-touch) .tiles article:hover {
    transform: scale(var(--card-zoom-card, 1.06));
}
body:not(.is-touch) .tiles article:hover > .image {
    transform: scale(var(--card-zoom-image, 1.15));
}
/* Fix: Home vacía no se agranda ni pierde esquinas al hover */
.tiles article > a .content {
    overflow: hidden;
}
body:not(.is-touch) .tiles article:hover .content {
    max-height: 6em !important;
    overflow: hidden;
}
.tiles article:hover,
.tiles article:hover > a,
.tiles article:hover > .image,
.tiles article:hover > .image:before,
.tiles article:hover > .image:after {
    border-radius: 18px;
    overflow: hidden;
}

/* Paleta Chulitos para overlays style1..6 */
.tiles article.style1 > .image:before { background-color: #f29bae; }
.tiles article.style2 > .image:before { background-color: #b9e2c1; }
.tiles article.style3 > .image:before { background-color: #c0abc2; }
.tiles article.style4 > .image:before { background-color: #f9c683; }
.tiles article.style5 > .image:before { background-color: #f29bae; opacity: 0.85; }
.tiles article.style6 > .image:before { background-color: #b9e2c1; opacity: 0.85; }

/* Header — logo 105px y barra -30% (2.8em ~44px, era 4em ~64px) */
#header {
    padding: 2.8em 0 0.035em 0 !important; /* ≈44px arriba (-30% vs 64px) */
    background: #fff;
    position: relative;
}
#header .inner {
    position: relative;
}
.header-flor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.header-flor img {
    position: absolute;
    opacity: 0.38;
    pointer-events: none;
}
.header-flor .flor-1 {
    width: 80px;
    right: 26%;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
}
.header-flor .flor-2 {
    width: 66px;
    right: 40%;
    top: 68%;
    transform: translateY(-50%) rotate(12deg);
}
.header-flor .flor-3 {
    width: 72px;
    right: 54%;
    top: 35%;
    transform: translateY(-50%) rotate(5deg);
}
.header-flor .flor-4 {
    width: 60px;
    right: 16%;
    top: 45%;
    transform: translateY(-50%) rotate(-12deg);
}
#header .logo {
    position: relative;
    z-index: 1;
}
#header .logo .symbol img {
    width: 105px !important;
    height: 105px !important;
}
/* Triplicar separación header → título (≈72px vs ~24px) */
#main {
    padding-top: 4.5em !important;
}
#header .logo .title {
    color: #314658;
    font-family: 'Sacramento', 'Dancing Script', 'Caveat', cursive !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-size: 2.2em;
    line-height: 1;
}
#header .logo {
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Frase del header — manuscrita de marca, a la derecha sobre las flores.
   Centrado vertical en la BARRA (#header), no en .inner: el padding de #header
   es asimétrico (2.8em arriba / 0.035em abajo), así que top:50% solo caería
   (2.8-0.035)/2 = 1.38em unos ~22px abajo. Se compensa en em del propio
   tagline (1.4em): 1.38/1.4 ≈ 0.99em. Si cambia font-size o padding, ajustar. */
.header-tagline {
    position: absolute;
    right: 90px;
    top: calc(50% - 0.99em);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-family: 'Sacramento', 'Dancing Script', 'Caveat', cursive !important;
    font-size: 1.4em;
    line-height: 1.15;
    color: #314658;
    text-shadow: 0 1px 0 #fff;
    max-width: 42%;
    text-align: right;
}
.header-tagline span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Títulos Home y categorías con manuscrita (misma que Chulito's), producto excluido */
#main > .inner > header h1,
#main > .inner > h1 {
    font-family: 'Sacramento', 'Dancing Script', 'Caveat', cursive !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-size: 3.2em !important;
    line-height: 1.1;
}
.chulitos-info h1 {
    font-family: "Nunito", "Source Sans Pro", Helvetica, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
}

@media screen and (max-width: 480px) {
    #header .logo .symbol img {
        width: 80px !important;
        height: 80px !important;
    }
    .header-tagline {
        font-size: 0.95em;
        top: calc(50% - 1.46em); /* misma compensación con font 0.95em: 1.38/0.95 */
        right: 64px;
        max-width: 44%;
    }
}
@media screen and (max-width: 736px) {
    .header-flor .flor-3,
    .header-flor .flor-4 {
        display: none;
    }
    .header-flor .flor-1 {
        width: 36px;
        opacity: 0.22;
        right: 20%;
    }
    .header-flor .flor-2 {
        width: 32px;
        opacity: 0.22;
        right: 32%;
    }
    .header-tagline {
        font-size: 1.05em;
        top: calc(50% - 1.32em); /* misma compensación con font 1.05em: 1.38/1.05 */
        right: 70px;
        max-width: 46%;
    }
}

/* Menú: MENÚ blanco por contraste */
#header nav ul li a[href="#menu"] { color: #ffffff !important; }
#menu h2 { color: #ffffff !important; }

/* Menú: osito decorativo al pie */
.menu-osito {
    font-size: 3em;
    text-align: center;
    margin: 1em 0 0.5em 0;
    line-height: 1;
}

/* Botones con paleta */
.button.primary, input[type="submit"].primary {
    background-color: #f29bae;
    box-shadow: none;
}
.button.primary:hover { background-color: #f9c683 !important; color: #314658 !important; }

/* Estado vacío simpático */
.chulitos-empty {
    text-align: center;
    padding: 1.5em 1em;
    background: #fff;
    border-radius: 18px;
    border: 2px dashed #b9e2c1;
}
.chulitos-empty-icon { font-size: 4.5em; margin-bottom: 0.3em; }
.chulitos-empty .actions {
    justify-content: center;
}
.chulitos-empty h2 { color: #314658; margin-bottom: 0.5em; }
.chulitos-empty p { color: #314658; }

/* Ensure tiles grid responsive handled by main.css, just ensure gap looks nice */
.tiles { gap: 0; }

/* Reveal on Scroll — solo tarjetas (section.tiles > article) de Home y categorías.
   La clase .chulitos-reveal se agrega SOLO vía JS: sin JS las tarjetas quedan
   visibles (fallback). Usa la propiedad `translate` (independiente de `transform`)
   para no pisar el zoom hover existente que escala con `transform: scale()`. */
.tiles article.chulitos-reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.55s ease-out, translate 0.55s ease-out, transform 0.3s ease;
    will-change: opacity, translate;
}
.tiles article.chulitos-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}
/* Movimiento reducido: sin animación, contenido directo */
@media (prefers-reduced-motion: reduce) {
    .tiles article.chulitos-reveal {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}