@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");

:root {
    --pink: #f34779;
    --pink-soft: #fff0f4;
    --purple: #8d56ad;
    --purple-dark: #68417f;
    --turquoise: #2db8b7;
    --yellow: #f3ab17;
    --cream: #fff9f6;
    --white: #ffffff;
    --text: #493b4d;
    --text-soft: #766a79;
    --border: rgba(141,86,173,.15);
    --shadow: 0 18px 50px rgba(91,58,100,.10);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.7;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* TOPBAR */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,249,246,.94);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
}

.nav-container {
    max-width: 1180px;
    height: 82px;
    padding: 0 24px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 50%;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}

.desktop-nav a {
    font-size: .92rem;
    font-weight: 600;
    transition: .2s;
}

.desktop-nav a:hover {
    color: var(--pink);
}

.menu-button,
.mobile-nav {
    display: none;
}

/* HERO */

.hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 82% 28%, rgba(45,184,183,.17), transparent 22%),
        radial-gradient(circle at 75% 70%, rgba(243,171,23,.16), transparent 18%),
        linear-gradient(135deg, #fff5f8 0%, #fff9f6 48%, #f5eafa 100%);
}

.hero::after {
    content: "♡";
    position: absolute;
    right: 11%;
    top: 22%;
    font-size: 15rem;
    line-height: 1;
    color: rgba(243,71,121,.08);
    transform: rotate(-8deg);
}

.hero-content {
    width: min(1180px, calc(100% - 48px));
    margin: auto;
    position: relative;
    z-index: 2;
}

.eyebrow,
.section-eyebrow {
    display: inline-block;
    color: var(--pink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 1rem;
}

.hero h1 {
    max-width: 720px;
    font-family: "Playfair Display", serif;
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    line-height: .98;
    font-weight: 600;
    letter-spacing: -.045em;
}

.hero h1 span {
    color: var(--pink);
    font-style: italic;
}

.hero p {
    max-width: 570px;
    margin: 1.8rem 0 2.3rem;
    font-size: 1.12rem;
    color: var(--text-soft);
}

.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 1.8rem;
    border-radius: 100px;
    background: var(--pink);
    color: white;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(243,71,121,.24);
    transition: .25s;
}

.button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(243,71,121,.32);
}

/* GENERAL */

.section-container {
    width: min(1180px, calc(100% - 48px));
    margin: auto;
}

.about-section,
.gallery-section,
.contact-section {
    padding: 110px 0;
}

h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

/* NOSOTROS */

.about-section {
    background: white;
}

.about-grid {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 7rem;
    align-items: center;
}

.about-art {
    min-height: 500px;
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(243,171,23,.22), transparent 18%),
        linear-gradient(145deg, var(--pink-soft), #eee1f5);
    display: grid;
    place-items: center;
}

.about-logo {
    width: min(330px, 72%);
    padding: 18px;
    background: rgba(255,255,255,.75);
    border-radius: 50%;
    box-shadow: var(--shadow);
}

.about-logo img {
    border-radius: 50%;
}

.about-content p {
    color: var(--text-soft);
    margin-top: 1rem;
}

.about-content .lead {
    color: var(--text);
    font-size: 1.17rem;
}

/* GALERIA */

.gallery-section {
    background: var(--cream);
}

.section-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3.5rem;
}

.section-heading p {
    color: var(--text-soft);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.gallery-placeholder {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(91,58,100,.05);
    transition: .25s;
}

.gallery-placeholder:nth-child(2n) {
    background: #f6edf9;
}

.gallery-placeholder:nth-child(3n) {
    background: #fff0f4;
}

.gallery-placeholder:hover {
    transform: translateY(-5px);
}

.gallery-placeholder span {
    color: var(--pink);
    font-size: 3rem;
}

.gallery-placeholder p {
    color: var(--purple);
    font-weight: 600;
}

/* CONTACTO */

.contact-section {
    background:
        radial-gradient(circle at 10% 80%, rgba(45,184,183,.16), transparent 25%),
        linear-gradient(135deg, #f6eafa, #fff0f4);
}

.contact-inner {
    text-align: center;
}

.contact-inner > p {
    color: var(--text-soft);
    font-size: 1.08rem;
}

.contact-buttons {
    max-width: 760px;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.contact-card {
    padding: 1.5rem;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    box-shadow: var(--shadow);
    transition: .25s;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--pink);
}

.contact-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink-soft);
    color: var(--pink);
    font-size: 1.7rem;
}

.contact-card strong,
.contact-card small {
    display: block;
}

.contact-card small {
    color: var(--text-soft);
}

/* FOOTER */

footer {
    padding: 55px 24px;
    background: #4c3853;
    color: white;
    text-align: center;
}

footer img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 1rem;
}

footer p {
    font-weight: 700;
}

footer small {
    color: rgba(255,255,255,.7);
}

/* MOBILE */

@media (max-width: 800px) {

    .nav-container {
        height: 72px;
    }

    .brand img {
        width: 58px;
        height: 58px;
    }

    .desktop-nav {
        display: none;
    }

    .menu-button {
        width: 42px;
        height: 42px;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
    }

    .menu-button span {
        display: block;
        width: 25px;
        height: 2px;
        margin: 0 auto;
        background: var(--purple-dark);
        transition: .2s;
    }

    .mobile-nav {
        display: none;
        padding: .5rem 24px 1.5rem;
        background: var(--cream);
        border-top: 1px solid var(--border);
    }

    .mobile-nav.active {
        display: grid;
    }

    .mobile-nav a {
        padding: .85rem 0;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
    }

    .hero {
        min-height: 610px;
    }

    .hero::after {
        font-size: 10rem;
        right: -10%;
        top: 14%;
    }

    .hero-content {
        width: min(100% - 36px, 1180px);
    }

    .hero h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .about-section,
    .gallery-section,
    .contact-section {
        padding: 75px 0;
    }

    .section-container {
        width: min(100% - 36px, 1180px);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .about-art {
        min-height: 360px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }

    .contact-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-placeholder {
        aspect-ratio: 4 / 3;
    }
}


/* GALERIA REAL CARAFA */
.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 24px;
    background: white;
    box-shadow: 0 12px 35px rgba(91,58,100,.10);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.gallery-item:hover img {
    transform: scale(1.055);
}

@media (max-width: 800px) {
    .gallery-item {
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .gallery-item {
        aspect-ratio: 1 / 1;
    }
}


/* GALERIA MOBILE SCROLLEABLE */
@media (max-width: 800px) {
    .gallery-grid {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding: .5rem 9% 1.4rem;
        margin-left: calc((100vw - 100%) / -2);
        margin-right: calc((100vw - 100%) / -2);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 9%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-item {
        flex: 0 0 82%;
        aspect-ratio: 1 / 1;
        scroll-snap-align: center;
        border-radius: 22px;
    }
}


/* LOGO CARAFA TOPBAR */
.brand img {
    width: 92px;
    height: 72px;
    object-fit: contain;
    border-radius: 0;
}

@media (max-width: 800px) {
    .brand img {
        width: 78px;
        height: 62px;
    }
}

/* LOGO CARAFA GRANDE DEFINITIVO */
.brand { display:flex; align-items:center; height:100%; }
.brand img { width:145px !important; height:105px !important; object-fit:contain !important; border-radius:0 !important; }
@media (max-width:800px) { .brand img { width:120px !important; height:90px !important; } }

/* TEST LOGO GRANDE + TOPBAR */
.nav-container { height: 130px !important; }
.brand img { width: 150px !important; height: 120px !important; max-width: none !important; }
@media (max-width:800px) { .nav-container { height: 105px !important; } .brand img { width: 125px !important; height: 95px !important; max-width: none !important; } }

/* TOPBAR CARAFA TAMAÑO FINAL */
.nav-container { height: 105px !important; }
.brand img { width: 125px !important; height: 95px !important; max-width: none !important; object-fit: contain !important; }
@media (max-width:800px) { .nav-container { height: 88px !important; } .brand img { width: 105px !important; height: 80px !important; } }

/* TOPBAR CARAFA - LOGO GRANDE */
.nav-container { height: 120px !important; }
.brand img { width: 145px !important; height: 110px !important; max-width: none !important; object-fit: contain !important; border-radius: 0 !important; }
@media (max-width:800px) { .nav-container { height: 100px !important; } .brand img { width: 125px !important; height: 92px !important; } }

/* ICONOS REDES */
.contact-icon svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
    display: block;
}


/* =========================================================
   CARAFA HERO + SERVICIOS + PROCESO
   ========================================================= */

.hero-carafa {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(255,249,246,.97) 0%, rgba(255,249,246,.90) 28%, rgba(255,249,246,.35) 53%, rgba(255,249,246,.02) 75%),
        url("images/portadacarafa.png?v=20260922-1");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-carafa::after {
    display: none;
}

.hero-carafa .hero-content {
    width: min(1180px, calc(100% - 48px));
    margin: auto;
}

.hero-carafa .hero-content > * {
    max-width: 610px;
}

.hero-carafa h1 {
    text-shadow: 0 2px 18px rgba(255,255,255,.3);
}

.button-arrow {
    margin-left: .65rem;
    font-size: 1.2rem;
}

/* SERVICIOS */

.services-section {
    padding: 100px 0 105px;
    background: #fffdfc;
}

.services-heading {
    margin-bottom: 3.2rem;
}

.services-heading h2 em,
.process-heading h2 em {
    color: var(--pink);
    font-weight: inherit;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.service-card {
    min-height: 245px;
    padding: 2rem 1.25rem;
    background: rgba(255,255,255,.95);
    border: 1px solid var(--border);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(91,58,100,.055);
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(91,58,100,.11);
}

.service-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 500;
}

.service-pink {
    color: var(--pink);
    background: #ffe5ee;
}

.service-purple {
    color: var(--purple);
    background: #eee1f7;
}

.service-peach {
    color: #ef826c;
    background: #ffe4d8;
}

.service-turquoise {
    color: var(--turquoise);
    background: #dcf3ef;
}

.service-yellow {
    color: #e69b13;
    background: #fff1ce;
}

.service-card h3 {
    margin-bottom: .55rem;
    font-family: "Playfair Display", serif;
    font-size: 1.2rem;
    color: var(--text);
}

.service-card p {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-soft);
}

/* COMO TRABAJAMOS */

.process-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 105px;
    background:
        radial-gradient(circle at 5% 80%, rgba(243,71,121,.10), transparent 20%),
        radial-gradient(circle at 93% 20%, rgba(141,86,173,.09), transparent 20%),
        linear-gradient(135deg, #fff2f7, #fbf0fb);
}

.process-section::before {
    content: "♡";
    position: absolute;
    left: 7%;
    top: 26%;
    color: rgba(243,71,121,.20);
    font-size: 5rem;
    transform: rotate(-15deg);
}

.process-section::after {
    content: "♡";
    position: absolute;
    right: 8%;
    bottom: 12%;
    color: rgba(45,184,183,.18);
    font-size: 4rem;
    transform: rotate(12deg);
}

.process-heading {
    margin-bottom: 4rem;
}

.process-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.process-step {
    position: relative;
    text-align: center;
    padding: 0 1rem;
}

.step-number {
    position: absolute;
    left: calc(50% - 48px);
    top: -8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: white;
    font-size: .75rem;
    font-weight: 700;
    z-index: 3;
}

.process-step:nth-child(2) .step-number {
    background: var(--purple);
}

.process-step:nth-child(3) .step-number {
    background: #ef826c;
}

.process-step:nth-child(4) .step-number {
    background: var(--turquoise);
}

.step-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    color: var(--pink);
    font-size: 2rem;
    box-shadow: 0 10px 30px rgba(91,58,100,.08);
}

.process-step:nth-child(2) .step-icon {
    color: var(--purple);
}

.process-step:nth-child(3) .step-icon {
    color: #ef826c;
}

.process-step:nth-child(4) .step-icon {
    color: var(--turquoise);
}

.process-step h3 {
    margin-bottom: .5rem;
    font-family: "Playfair Display", serif;
    font-size: 1.15rem;
}

.process-step p {
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.55;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .hero-carafa {
        min-height: 660px;
        align-items: flex-end;
        padding-bottom: 4rem;
        background-image:
            linear-gradient(0deg, rgba(255,249,246,.98) 0%, rgba(255,249,246,.90) 40%, rgba(255,249,246,.20) 78%),
            url("images/portadacarafa.png?v=20260922-1");
        background-position: 67% center;
    }

    .hero-carafa .hero-content {
        width: min(100% - 36px, 1180px);
    }

    .hero-carafa .hero-content > * {
        max-width: 100%;
    }

    .services-section,
    .process-section {
        padding: 75px 0;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 3.5rem;
    }
}

@media (max-width: 520px) {
    .hero-carafa {
        min-height: 620px;
        background-position: 64% center;
    }

    .hero-carafa h1 {
        font-size: clamp(3rem, 14vw, 4.2rem);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        padding: 1.7rem;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
}


/* OBSERVACIONES GERENCIA CARAFA XD */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.3rem;
}

.hero-actions .button-primary {
    margin: 0;
}

.button-secondary {
    min-height: 54px;
    padding: 0 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pink);
    border-radius: 100px;
    background: rgba(255,255,255,.88);
    color: var(--pink);
    font-weight: 700;
    transition: .25s ease;
}

.button-secondary:hover {
    background: var(--pink);
    color: white;
    transform: translateY(-3px);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.product-card {
    padding: 2rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(91,58,100,.055);
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(91,58,100,.11);
}

.product-card .service-icon {
    margin: 0 0 1.2rem;
}

.product-card h3 {
    margin-bottom: .55rem;
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
}

.product-card p {
    color: var(--text-soft);
    font-size: .92rem;
    line-height: 1.6;
}

@media (max-width:800px) {
    .products-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        max-width: 330px;
    }

    .hero-actions a {
        width: 100%;
    }
}

@media (max-width:520px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}


/* ESTRUCTURA FINAL CARAFA */

.gallery-description {
    margin-top: .8rem;
}

.buy-section {
    padding: 105px 0;
    background: #fffdfc;
}

.buy-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1rem;
}

.buy-step {
    position: relative;
    padding: 2rem 1.35rem;
    text-align: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(91,58,100,.055);
}

.buy-step span {
    width: 38px;
    height: 38px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pink);
    color: white;
    font-weight: 700;
}

.buy-step:nth-child(2) span { background:var(--purple); }
.buy-step:nth-child(3) span { background:#ef826c; }
.buy-step:nth-child(4) span { background:var(--turquoise); }
.buy-step:nth-child(5) span { background:var(--yellow); }

.buy-step h3 {
    margin-bottom:.6rem;
    font-family:"Playfair Display",serif;
    font-size:1.12rem;
}

.buy-step p {
    color:var(--text-soft);
    font-size:.88rem;
}

.custom-section {
    padding:110px 0;
    text-align:center;
    background:
        radial-gradient(circle at 15% 30%,rgba(243,71,121,.10),transparent 22%),
        radial-gradient(circle at 85% 70%,rgba(141,86,173,.10),transparent 22%),
        linear-gradient(135deg,#fff2f7,#f8effb);
}

.custom-inner {
    max-width:760px;
}

.custom-inner > p {
    color:var(--text-soft);
    margin:.65rem auto;
}

.custom-lead {
    font-size:1.15rem;
    color:var(--text) !important;
}

.custom-inner .button-primary {
    margin-top:2rem;
}

.shipping-section {
    padding:90px 0;
    background:white;
}

.shipping-inner {
    max-width:900px;
    display:grid;
    grid-template-columns:130px 1fr;
    gap:3rem;
    align-items:center;
}

.shipping-icon {
    width:130px;
    height:130px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--pink-soft);
    color:var(--pink);
    font-size:4rem;
}

.shipping-inner h2 {
    margin-bottom:1rem;
}

.shipping-inner p {
    color:var(--text-soft);
    margin-top:.45rem;
}

.shipping-highlight {
    color:var(--text) !important;
    font-size:1.2rem;
    font-weight:700;
}

.contact-shipping {
    margin-top:2rem;
    color:var(--purple) !important;
    font-weight:700;
}

.footer-links {
    margin:.7rem 0;
}

.footer-links a {
    color:white;
    font-weight:600;
}

.footer-links span {
    margin:0 .5rem;
    opacity:.5;
}

@media(max-width:1000px) {
    .buy-grid {
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:800px) {
    .buy-section,
    .custom-section,
    .shipping-section {
        padding:75px 0;
    }

    .buy-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .shipping-inner {
        grid-template-columns:1fr;
        gap:1.5rem;
        text-align:center;
    }

    .shipping-icon {
        margin:auto;
        width:100px;
        height:100px;
        font-size:3rem;
    }
}

@media(max-width:520px) {
    .buy-grid {
        grid-template-columns:1fr;
    }
}

/* CTA GALERIA */
.gallery-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* HERO TITULO MAS HUMANO XD */
.hero-carafa h1 {
    font-size: clamp(3.2rem, 5.2vw, 5.3rem) !important;
    line-height: .98 !important;
    max-width: 650px !important;
}
@media (max-width:800px) {
    .hero-carafa h1 {
        font-size: clamp(2.7rem, 10vw, 4rem) !important;
        line-height: 1 !important;
        max-width: 520px !important;
    }
}
@media (max-width:520px) {
    .hero-carafa h1 {
        font-size: clamp(2.45rem, 11vw, 3.2rem) !important;
        line-height: 1.02 !important;
    }
}

/* HERO COMPACTO - LENOVO IDEAPAD ANTI-WEVEO XD */
.hero-carafa {
    min-height: 520px !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.hero-carafa h1 {
    font-size: clamp(2.8rem, 4.4vw, 4.4rem) !important;
    line-height: .96 !important;
    max-width: 590px !important;
    margin-top: .55rem !important;
    margin-bottom: .9rem !important;
}
.hero-carafa .eyebrow {
    font-size: .7rem !important;
}
.hero-carafa .hero-content > p {
    max-width: 570px !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
}
.hero-actions {
    margin-top: 1.5rem !important;
}
.hero-actions a {
    min-height: 46px !important;
    padding: 0 1.35rem !important;
    font-size: .82rem !important;
}
@media (max-width:800px) {
    .hero-carafa {
        min-height: 540px !important;
        padding-top: 30px !important;
        padding-bottom: 35px !important;
    }
    .hero-carafa h1 {
        font-size: clamp(2.35rem, 9vw, 3.3rem) !important;
        line-height: .98 !important;
        margin-bottom: .8rem !important;
    }
    .hero-actions {
        margin-top: 1.2rem !important;
        gap: .65rem !important;
    }
}
@media (max-width:520px) {
    .hero-carafa {
        min-height: 500px !important;
        padding-bottom: 28px !important;
    }
    .hero-carafa h1 {
        font-size: clamp(2.15rem, 10vw, 2.8rem) !important;
    }
    .hero-carafa .hero-content > p {
        font-size: .86rem !important;
    }
}

/* LOGO + NOMBRE CARAFA */
.brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}
.brand-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}
.brand-name strong {
    font-family: "Playfair Display", serif;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #f34779;
}
.brand-name small {
    margin-top: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: #8d56ad;
}
@media (max-width:800px) {
    .brand {
        gap: 8px !important;
    }
    .brand-name strong {
        font-size: 1.2rem;
    }
    .brand-name small {
        margin-top: 4px;
        font-size: .52rem;
        letter-spacing: .2em;
    }
}
@media (max-width:390px) {
    .brand-name strong {
        font-size: 1.05rem;
    }
    .brand-name small {
        font-size: .46rem;
    }
}

/* GALERIAS POR CATEGORIA - CARRUSEL HORIZONTAL */
.gallery-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1.25rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .7rem 0 1.5rem !important;
}
.gallery-grid::-webkit-scrollbar {
    display: none;
}
.gallery-item {
    flex: 0 0 340px !important;
    width: 340px !important;
    aspect-ratio: 1 / 1 !important;
    scroll-snap-align: start;
}
.gallery-category-title {
    margin: 2.5rem 0 1rem;
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    color: var(--text);
}
.gallery-category-title span {
    color: var(--pink);
}
@media (max-width:800px) {
    .gallery-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: .5rem 0 1.3rem !important;
        scroll-padding-inline: 0 !important;
    }
    .gallery-item {
        flex: 0 0 82% !important;
        width: 82% !important;
        scroll-snap-align: center;
    }
    .gallery-category-title {
        font-size: 1.65rem;
        margin-top: 2rem;
    }
}

/* CONTROLES CARRUSEL */
.gallery-category-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:2.5rem;
    margin-bottom:1rem;
}
.gallery-category-header .gallery-category-title {
    margin:0 !important;
}
.gallery-arrows {
    display:flex;
    gap:.65rem;
}
.gallery-arrow {
    width:46px;
    height:46px;
    border:1px solid rgba(243,71,121,.25);
    border-radius:50%;
    background:white;
    color:var(--pink);
    font-size:1.35rem;
    cursor:pointer;
    box-shadow:0 7px 20px rgba(91,58,100,.08);
    transition:.2s ease;
}
.gallery-arrow:hover {
    background:var(--pink);
    color:white;
    transform:translateY(-2px);
}
@media(max-width:520px) {
    .gallery-arrow {
        width:40px;
        height:40px;
    }
}

/* FLECHAS LATERALES DEL CARRUSEL */
.gallery-category-header {
    position: static !important;
}
.gallery-arrows {
    position: static !important;
}
.gallery-section .section-container {
    position: relative;
}
.gallery-prev,
.gallery-next {
    position: absolute !important;
    top: 50% !important;
    z-index: 20 !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 8px 25px rgba(91,58,100,.16) !important;
}
.gallery-prev {
    left: -24px !important;
}
.gallery-next {
    right: -24px !important;
}
.gallery-prev:hover,
.gallery-next:hover {
    background: var(--pink) !important;
    color: white !important;
}
@media (max-width:800px) {
    .gallery-prev,
    .gallery-next {
        width: 42px !important;
        height: 42px !important;
        top: 52% !important;
    }
    .gallery-prev {
        left: -5px !important;
    }
    .gallery-next {
        right: -5px !important;
    }
}

/* HERO MAS LIMPIO - GERENCIA V2 XD */
.hero-carafa {
    background-position: 62% center !important;
}
.hero-carafa .hero-content {
    padding-left: 0 !important;
}
.hero-carafa .hero-content > * {
    max-width: 500px !important;
}
.hero-carafa h1 {
    font-size: clamp(2.55rem, 3.8vw, 3.8rem) !important;
    line-height: .98 !important;
    max-width: 500px !important;
}
.hero-carafa .hero-content > p {
    max-width: 470px !important;
    font-size: .86rem !important;
    line-height: 1.5 !important;
}
.hero-carafa .eyebrow {
    font-size: .62rem !important;
    letter-spacing: .2em !important;
}
.hero-actions {
    margin-top: 1.25rem !important;
}
@media (max-width:800px) {
    .hero-carafa {
        background-position: 66% center !important;
    }
    .hero-carafa h1 {
        font-size: clamp(2.15rem, 8vw, 2.9rem) !important;
        max-width: 420px !important;
    }
    .hero-carafa .hero-content > p {
        max-width: 400px !important;
        font-size: .82rem !important;
    }
}

/* HERO MOBILE LIMPIO - MENOS CARNAVAL XD */
@media (max-width:800px) {
    .hero-carafa {
        min-height: 500px !important;
        align-items: flex-end !important;
        padding: 0 18px 28px !important;
        background-image:
            linear-gradient(to top, rgba(255,249,246,1) 0%, rgba(255,249,246,.98) 38%, rgba(255,249,246,.78) 58%, rgba(255,249,246,.15) 82%),
            url("images/portadacarafa.png?v=20260922-1") !important;
        background-size: cover !important;
        background-position: 64% center !important;
    }
    .hero-carafa .hero-content {
        width: 100% !important;
        margin: 0 auto !important;
    }
    .hero-carafa .eyebrow {
        font-size: .56rem !important;
        letter-spacing: .17em !important;
    }
    .hero-carafa h1 {
        max-width: 360px !important;
        margin: .45rem 0 .7rem !important;
        font-size: clamp(2rem, 9vw, 2.65rem) !important;
        line-height: .95 !important;
    }
    .hero-carafa .hero-content > p {
        max-width: 350px !important;
        font-size: .8rem !important;
        line-height: 1.45 !important;
    }
    .hero-actions {
        max-width: 100% !important;
        margin-top: 1rem !important;
        gap: .55rem !important;
    }
    .hero-actions a {
        min-height: 44px !important;
    }
}