@font-face {
    font-family: 'fredoka';
    src: url('../fonts/fredoka.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'fredoka';
    src: url('../fonts/fredoka.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'fredoka', sans-serif;
}

body {
    background-color: #ffecd2;
    text-align: center;
}

/* Header */
header {
    background-color: #ffde7d;
    padding: 20px;
    border-bottom: 5px dotted #ff6f61;
    box-shadow: 0 4px 10px rgba(255, 111, 97, 0.3);
}

header h1 a {
    text-decoration: none;
    color: #cd7f32;
    font-size: 32px;
    text-shadow: 2px 2px #ffd6d6;
    font-weight: 700;
    transition: color 0.3s ease;
}

header h1 a:hover {
    color: #ff3d3d;
}

html {
    scroll-behavior: smooth;
}

.headerLinks input {
    margin: 5px;
    padding: 10px 15px;
    border: 2px solid #ffd6d6;
    border-radius: 20px;
    background-color: #fffaf7;
    cursor: pointer;
    color: #ff6f61;
    font-weight: bold;
    transition: all 0.3s ease, transform 0.2s ease;
}

.headerLinks input:hover {
    background-color: #ffb6b9;
    transform: scale(1.1);
}

/* Container */
.container, .container-2 {
    margin: 20px auto;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    border: 5px dotted #ffde7d;
    background: #fff5e6;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 180, 180, 0.3);
    transition: transform 0.3s ease;
}

.container:hover, .container-2:hover {
    transform: translateY(-10px);
}

/* Banner */
.banner img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(255, 182, 193, 0.3);
    transition: transform 0.3s ease;
}

.banner img:hover {
    transform: rotate(3deg) scale(1.05);
}

/* Ofertas */
.offers h1 {
    font-size: 26px;
    margin: 15px 0;
    color: #ff6f61;
    text-shadow: 1px 1px #ffd6d6;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.row img {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(255, 182, 193, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.row img:hover {
    transform: scale(1.2) rotate(5deg);
    box-shadow: 0 8px 16px rgba(255, 111, 97, 0.5);
}

/* Footer */
footer {
    margin-top: 20px;
    padding: 15px;
    background-color: #ffde7d;
    color: #ff6f61;
    font-weight: bold;
    box-shadow: 0 -4px 10px rgba(255, 111, 97, 0.3);
    animation: footerGlow 3s infinite alternate;
}

footer a {
    text-decoration: none;
    color: #ff3d3d;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ff6f61;
}