/* =========================================
VARIABLES
========================================= */
:root {
--red: #9f2525;
--red-dark: #721919;
--green: #315b45;
--cream: #f8f3e9;
--cream-dark: #eee4d3;
--gold: #c79b52;
--dark: #211b17;
--text: #4b433d;
--white: #ffffff;
}

/* =========================================
RESET
========================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family:
    "Montserrat",
    sans-serif;

background:
    var(--cream);

color:
    var(--dark);

line-height: 1.7;
}

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

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

button {
font-family: inherit;
}

.container {
width:
    min(
        1160px,
        calc(100% - 40px)
    );

margin:
    0 auto;
}

/* =========================================
HEADER
========================================= */

.header {
position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 1000;

background:
    rgba(
        33,
        27,
        23,
        .96
    );

border-bottom:
    1px solid
    rgba(
        255,
        255,
        255,
        .08
    );
}

.nav {
height: 78px;
display: flex;
align-items: center;
justify-content:
    space-between;
}

/* LOGO */
.logo {
display: flex;
align-items: center;
gap: 10px;
color:
    var(--white);

font-family:
    "Cormorant Garamond",
    serif;

font-size: 1.65rem;

font-weight: 700;
}

.logo-symbol {
font-size: 1.6rem;
}

/* =========================================
MENÚ
========================================= */
.nav-menu {
display: flex;

align-items: center;

gap: 28px;

color:
    rgba(
        255,
        255,
        255,
        .9
    );

font-size: .86rem;

font-weight: 600;

text-transform:
    uppercase;

letter-spacing:
    .04em;
}

.nav-menu a {
position: relative;

padding:
    8px 0;
}

.nav-menu a::after {
content: "";

position: absolute;

left: 0;

bottom: 0;

width: 0;

height: 2px;

background:
    var(--gold);

transition:
    width .25s ease;
}

.nav-menu a:hover {
color:
    var(--gold);
}

.nav-menu a:hover::after {
width: 100%;
}

/* =========================================
MENÚ MÓVIL
========================================= */

.menu-toggle {
display: none;

width: 44px;

height: 42px;

border: none;

background: transparent;

cursor: pointer;

z-index: 1002;
}

.menu-toggle span {
display: block;

width: 27px;

height: 2px;

margin:
    6px auto;

background:
    var(--white);

transition:
    .3s ease;
}

/* =========================================
HERO
========================================= */

.hero {
position: relative;

min-height: 800px;

display: flex;

align-items: center;

color:
    var(--white);

overflow: hidden;
}

.hero-background {
position: absolute;

inset: 0;

background-image:
    url(
        "https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=2000&q=90"
    );

background-size:
    cover;

background-position:
    center;
}

.hero-overlay {
position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(25,18,14,.88),
        rgba(25,18,14,.57),
        rgba(25,18,14,.18)
    );
}

.hero-content {
position: relative;

z-index: 2;

padding-top:
    78px;
}

.hero-kicker {
display: block;

margin-bottom:
    18px;

color:
    #dfb66c;

font-size:
    .8rem;

font-weight:
    700;

letter-spacing:
    .25em;
}

.hero h1 {
max-width:
    850px;

font-family:
    "Cormorant Garamond",
    serif;

font-size:
    clamp(
        4rem,
        9vw,
        7.8rem
    );

font-weight:
    600;

line-height:
    .88;
}

.hero h1 em {
color:
    #e4ba71;

font-weight:
    500;
}

.hero p {
max-width:
    570px;

margin-top:
    30px;

color:
    rgba(
        255,
        255,
        255,
        .86
    );

font-size:
    1.08rem;
}

.hero-button {
display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

margin-top:
    32px;

padding:
    14px 25px;

border:
    1px solid
    #d8b16a;

color:
    white;

font-size:
    .82rem;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    .08em;

transition:
    background .25s ease,
    color .25s ease;
}

.hero-button:hover {
background:
    #d8b16a;

color:
    var(--dark);
}

/* =========================================
SCROLL INDICATOR
========================================= */

.scroll-indicator {
position: absolute;

z-index: 2;

bottom: 30px;

left: 50%;

transform:
    translateX(-50%);

display: flex;

align-items: center;

gap: 12px;

color:
    rgba(
        255,
        255,
        255,
        .7
    );

font-size:
    .68rem;

text-transform:
    uppercase;

letter-spacing:
    .18em;
}

.scroll-line {
width: 55px;

height: 1px;

background:
    rgba(
        255,
        255,
        255,
        .5
    );
}

/* =========================================
INTRO
========================================= */

.intro {
padding:
    100px 0;

background:
    var(--cream);
}

.intro-grid {
display:
    grid;

grid-template-columns:
    1fr 1.3fr;

gap:
    90px;

align-items:
    center;
}

.section-label {
display:
    inline-block;

color:
    var(--red);

font-size:
    .75rem;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    .2em;
}

.intro-title h2,
.section-header h2,
.history-content h2,
.contact-section h2 {
margin-top:
    12px;

font-family:
    "Cormorant Garamond",
    serif;

font-size:
    clamp(
        2.8rem,
        5vw,
        4.5rem
    );

font-weight:
    600;

line-height:
    .98;
}

.intro-title h2 span,
.history-content h2 span {
display:
    block;

color:
    var(--red);
}

.intro-text {
color:
    var(--text);

font-size:
    1.05rem;
}

.intro-text p + p {
margin-top:
    20px;
}

/* =========================================
SECCIONES
========================================= */

.section {
padding:
    105px 0;
}

.section-header {
max-width:
    700px;

margin:
    0 auto 45px;

text-align:
    center;
}

.section-header h2 {
margin-top:
    8px;
}

.section-header p {
margin-top:
    18px;

color:
    #786d65;
}

/* =========================================
FILTRO DEL MENÚ
========================================= */

.menu-filters {
display:
    flex;

justify-content:
    center;

align-items:
    center;

gap:
    8px;

margin:
    0 auto 55px;

padding:
    6px;

width:
    fit-content;

max-width:
    100%;

background:
    var(--cream);

border:
    1px solid
    var(--cream-dark);

border-radius:
    4px;
}

.filter-btn {
position:
    relative;

border:
    none;

background:
    transparent;

color:
    #776c64;

padding:
    13px 22px;

cursor:
    pointer;

font-family:
    "Montserrat",
    sans-serif;

font-size:
    .76rem;

font-weight:
    700;

text-transform:
    uppercase;

letter-spacing:
    .07em;

transition:
    color .25s ease,
    background .25s ease;
}

.filter-btn:hover {
color:
    var(--red);
}

.filter-btn.active {
background:
    var(--red);

color:
    var(--white);
}

.filter-btn.active:hover {
color:
    var(--white);
}

/* =========================================
PIZZAS / PRODUCTOS
========================================= */

.pizzas-section {
background:
    #fff;
}

.pizza-grid {
display:
    grid;

grid-template-columns:
    repeat(
        3,
        1fr
    );

gap:
    28px;
}

.pizza-card {
background:
    var(--cream);

transition:
    transform .3s ease,
    box-shadow .3s ease,
    opacity .3s ease;
}

.pizza-card:hover {
transform:
    translateY(-5px);

box-shadow:
    0
    15px
    35px
    rgba(
        0,
        0,
        0,
        .10
    );
}

.pizza-card.menu-hidden {
display:
    none;
}

.pizza-card.menu-visible {
animation:
    menuItemIn .4s ease both;
}

@keyframes menuItemIn {
from {

    opacity: 0;

    transform:
        translateY(15px);

}

to {

    opacity: 1;

    transform:
        translateY(0);

}
}

.pizza-image {
height:
    285px;

overflow:
    hidden;
}

.pizza-image img {
height:
    100%;

object-fit:
    cover;

transition:
    transform .5s ease;
}

.pizza-card:hover
.pizza-image img {
transform:
    scale(1.04);
}

.pizza-info {
padding:
    23px
    22px
    26px;
}

.pizza-name {
display:
    flex;

justify-content:
    space-between;

gap:
    15px;

align-items:
    baseline;
}

.pizza-name h3 {
font-family:
    "Cormorant Garamond",
    serif;

font-size:
    1.8rem;

font-weight:
    700;
}

.pizza-name span {
color:
    var(--red);

font-weight:
    700;

font-size:
    1rem;

white-space:
    nowrap;
}

.pizza-info p {
margin-top:
    8px;

color:
    #776c64;

font-size:
    .88rem;
}

/* =========================================
HISTORIA
========================================= */

.history-section {
padding:
    110px 0;

background:
    var(--cream-dark);
}

.history-grid {
display:
    grid;

grid-template-columns:
    1fr 1fr;

gap:
    75px;

align-items:
    center;
}

.history-image {
position:
    relative;
}

.history-image img {
height:
    600px;

object-fit:
    cover;
}

.image-caption {
position:
    absolute;

right:
    -20px;

bottom:
    25px;

padding:
    14px 20px;

background:
    var(--red);

color:
    white;

font-size:
    .7rem;

font-weight:
    700;

letter-spacing:
    .15em;
}

.history-content p {
margin-top:
    22px;

color:
    var(--text);
}

.history-content strong {
color:
    var(--red);
}

.history-quote {
margin-top:
    35px;

padding:
    22px 25px;

border-left:
    3px solid
    var(--gold);

color:
    var(--green);

font-family:
    "Cormorant Garamond",
    serif;

font-size:
    1.35rem;

font-style:
    italic;
}

/* =========================================
INGREDIENTES
========================================= */

.ingredients-section {
padding:
    95px 0;

background:
    var(--green);

color:
    white;

}

.section-header.light {
color:
    white;

}

.section-header.light
.section-label {
color:
    #e3bf78;
}

.section-header.light p {
color:
    rgba(
        255,
        255,
        255,
        .7
    );
}

.ingredients-grid {
display:
    grid;

grid-template-columns:
    repeat(
        5,
        1fr
    );

gap:
    18px;

}

.ingredient {
padding:
    30px 15px;

text-align:
    center;

border:
    1px solid
    rgba(
        255,
        255,
        255,
        .15
    );

transition:
    transform .3s ease;
}

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

.ingredient-icon {
margin-bottom:
    15px;

font-size:
    2rem;
}

.ingredient h3 {
font-family:
    "Cormorant Garamond",
    serif;

font-size:
    1.45rem;
}

.ingredient p {
margin-top:
    7px;

color:
    rgba(
        255,
        255,
        255,
        .65
    );

font-size:
    .78rem;
}

/* =========================================
VIDEO
========================================= */

.video-section {
background:
    #fff;
}

.video-wrapper {
position:
    relative;

width:
    100%;

aspect-ratio:
    16 / 9;

overflow:
    hidden;

background:
    #000;

box-shadow:
    0
    20px
    60px
    rgba(
        50,
        35,
        25,
        .15
    );

}

.video-wrapper iframe {
position:
    absolute;

inset:
    0;

width:
    100%;

height:
    100%;

border:
    0;
}

.video-note {
margin-top:
    15px;

text-align:
    center;

color:
    #8b817a;

font-size:
    .75rem;

}

/* =========================================
GALERÍA
========================================= */

.gallery-section {
padding:
    100px 0;

background:
    var(--cream);

}

.gallery {
display:
    grid;

grid-template-columns:
    repeat(
        4,
        1fr
    );

grid-template-rows:
    230px
    230px;

gap:
    12px;

}

.gallery-item {
overflow:
    hidden;

}

.gallery-item img {
width:
    100%;

height:
    100%;

object-fit:
    cover;

transition:
    transform .5s ease;

}

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

}

.gallery-large {
grid-column:
    span 2;

grid-row:
    span 2;

}

/* =========================================
CONTACTO
========================================= */
.contact-section {
padding:
    100px 0;

background:
    var(--red);

color:
    white;

}

.contact-grid {
display:
    grid;

grid-template-columns:
    1.2fr .8fr;

gap:
    80px;

align-items:
    center;

}

.contact-section
.section-label {
color:
    #e7c57f;

}

.contact-section h2 {
max-width:
    650px;

}

.contact-grid > div:first-child p {
max-width:
    600px;

margin-top:
    25px;

color:
    rgba(
        255,
        255,
        255,
        .78
    );

}

.contact-info {
padding:
    30px;

border:
    1px solid
    rgba(
        255,
        255,
        255,
        .25
    );
}

.contact-item {
display:
    flex;

gap:
    18px;

}

.contact-item + .contact-item {
margin-top:
    25px;

}

.contact-icon {
font-size:
    1.3rem;

}

.contact-item strong {
display:
    block;

font-size:
    .78rem;

text-transform:
    uppercase;

letter-spacing:
    .1em;

}

.contact-item p {
margin-top:
    4px;

color:
    rgba(
        255,
        255,
        255,
        .78
    );

font-size:
    .88rem;

}

/* =========================================
FOOTER
========================================= */

footer {
background:
    var(--dark);

color:
    white;

}

.footer-content {
padding:
    55px 0;

display:
    flex;

justify-content:
    space-between;

gap:
    50px;

}

.footer-brand {
max-width:
    400px;
}

.footer-brand p {
margin-top:
    15px;

color:
    #9c918a;

font-size:
    .85rem;

}

.footer-links {

display:
    flex;

gap:
    25px;

align-items:
    flex-start;

flex-wrap:
    wrap;

color:
    #c4b9b1;

font-size:
    .8rem;

}

.footer-links a:hover {
color:
    #e1bd75;

}

.footer-bottom {

padding:
    18px;

border-top:
    1px solid
    rgba(
        255,
        255,
        255,
        .08
    );

text-align:
    center;

color:
    #766d67;

font-size:
    .72rem;

}

/* =========================================
TABLET
========================================= */

@media (max-width: 950px) {

.menu-toggle {

    display:
        block;

}



.nav-menu {

    position:
        fixed;

    inset:
        0;

    height:
        100vh;

    padding:
        110px
        30px
        40px;

    background:
        var(--dark);

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        5px;

    transform:
        translateX(100%);

    transition:
        transform .3s ease;

}



.nav-menu.active {

    transform:
        translateX(0);

}



.nav-menu a {

    padding:
        16px 10px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}



.pizza-grid {

    grid-template-columns:
        repeat(
            2,
            1fr
        );

}



.ingredients-grid {

    grid-template-columns:
        repeat(
            3,
            1fr
        );

}



.history-grid {

    gap:
        45px;

}



.menu-filters {

    gap:
        4px;

}



.filter-btn {

    padding:
        12px 16px;

    font-size:
        .72rem;

}

}

/* =========================================
MÓVIL
========================================= */

@media (max-width: 650px) {

.container {

    width:
        calc(
            100% - 28px
        );

}



.nav {

    height:
        68px;

}



/* HERO */

.hero {

    min-height:
        680px;

}



.hero-background {

    background-position:
        60% center;

}



.hero-overlay {

    background:
        rgba(
            25,
            18,
            14,
            .68
        );

}



.hero-content {

    text-align:
        center;

}



.hero-kicker {

    font-size:
        .68rem;

}



.hero h1 {

    font-size:
        clamp(
            3.5rem,
            17vw,
            5rem
        );

}



.hero p {

    font-size:
        .92rem;

}



.hero-button {

    width:
        100%;

}



/* INTRO */

.intro {

    padding:
        70px 0;

}



.intro-grid {

    grid-template-columns:
        1fr;

    gap:
        30px;

}



/* SECCIONES */

.section {

    padding:
        75px 0;

}



/* FILTRO */

.menu-filters {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    width:
        100%;

    gap:
        2px;

    padding:
        4px;

    margin-bottom:
        40px;

}



.filter-btn {

    padding:
        12px
        4px;

    font-size:
        .56rem;

    letter-spacing:
        .01em;

}



/* PIZZAS */

.pizza-grid {

    grid-template-columns:
        1fr;

}



.pizza-image {

    height:
        260px;

}



/* HISTORIA */

.history-section {

    padding:
        75px 0;

}



.history-grid {

    grid-template-columns:
        1fr;

}



.history-image img {

    height:
        380px;

}



.image-caption {

    right:
        10px;

}



/* INGREDIENTES */

.ingredients-section {

    padding:
        75px 0;

}



.ingredients-grid {

    grid-template-columns:
        repeat(
            2,
            1fr
        );

}



/* VIDEO */

.video-wrapper {

    aspect-ratio:
        16 / 10;

}



/* GALERÍA */

.gallery {

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    grid-template-rows:
        repeat(
            3,
            180px
        );

}



.gallery-large {

    grid-column:
        span 2;

    grid-row:
        span 1;

}



/* CONTACTO */

.contact-section {

    padding:
        75px 0;

}



.contact-grid {

    grid-template-columns:
        1fr;

    gap:
        40px;

}



/* FOOTER */

.footer-content {

    flex-direction:
        column;

}


.footer-links {

    flex-direction:
        column;

    gap:
        10px;

}

}