@font-face{font-family:Lato;src:url('../fonts/Lato-Regular.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Noto Serif';src:url('../fonts/NotoSerif-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}:root{

/* === PALETA ENCUENTRO CAFÉ === */
--color-espresso:#2C1A0E;
--color-tierra:#7B4A2D;
--color-tierra-light:#A06540;
--color-latte:#C4956A;
--color-crema:#F5E6C8;
--color-crema-dark:#E8D5A8;
--color-blanco:#FFFFFF;
--color-verde:#707743;
--color-verde-light:#3D503C;

/* Alias para compatibilidad con clases existentes */
--color-terracota:var(--color-tierra);
--color-terracota-light:var(--color-latte);
--color-terracota-dark:var(--color-espresso);
--color-carbon:var(--color-espresso);
--color-carbon-mid:#5C3D28;
--color-carbon-light:var(--color-latte);

--font-display:'Noto Serif',Georgia,serif;
--font-body:'Lato',Helvetica,sans-serif;
--text-display:56px;
--text-h2:32px;
--text-h3:24px;
--text-h4:20px;
--text-h4-italic:20px;
--text-nav:20px;
--text-body:20px;
--text-small:16px;
--fw-light:300;
--fw-regular:400;
--fw-bold:700;
--lh-display:1.1;
--lh-heading:1.2;
--lh-body:1.7;
--ls-nav:0.08em;
--ls-label:0.12em;
--sp-8:8px;
--sp-16:16px;
--sp-48:48px}

*{padding:0;margin:0;box-sizing:border-box}
body{color:var(--color-crema);width:100%}
.title{font-family:var(--font-display);font-weight:600;font-style:italic}
.bodyText{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body)}
.fon-sizeH2{font-size:var(--text-h2)}
.blackH{color:var(--color-espresso)}
.textlink{font-family:var(--font-body);font-size:var(--text-nav)}
.btn,.buttonMain,.buttonsecond{font-size:var(--text-h3);padding:var(--sp-16);border:none;border-radius:10px;cursor:pointer}
@media (min-width:1200px){.btn,.buttonMain,.buttonsecond{font-size:var(--text-small)}}
h3{font-size:var(--text-h3)}
section{padding-top:var(--sp-48)}

/* Botón principal — Verde hoja */
.btn--main,.buttonMain{background-color:var(--color-verde);color:var(--color-crema);transition:ease .9s}
.btn--main:hover,.buttonMain:hover{background-color:var(--color-verde-light);}

/* Botón secundario — Latte */
.btn--second,.buttonsecond{background:0 0;border:var(--color-verde) 2px solid;color:var(--color-crema);transition:ease .9s}
.btn--second:hover,.buttonsecond:hover{background-color:var(--color-verde);}

li{list-style:none}
a{text-decoration:none;transition:ease .9s}
a:hover{color:var(--color-latte)!important}

/* HEADER */
header{background: url("../img/bannerHeader.avif");background-blend-mode:luminosity;background-size:cover;background-position:center;height:100vh;position:relative;display:grid;grid-template-rows:repeat(2,auto);width:100%}
header nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--sp-16);align-self:start;position:relative;z-index:10}
header nav .logo{ justify-self: left;}
header nav input{display:none}
header nav #manu-hamburger{display:flex;flex-direction:column;gap:4px;justify-content:center;z-index:30}
header nav #manu-hamburger .bar{background-color:var(--color-verde);width:3em;height:7px}
header nav .navContent{position:fixed;width:100%;height:100vh;padding-right:var(--sp-16);top:0;right:-200%;display:flex;flex-direction:column;align-items:end;justify-content:center;z-index:25;background:rgba(44,26,14,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);gap:var(--sp-48);transition:ease .7s}
header nav .navContent ul{display:flex;flex-direction:column;align-items:end;gap:var(--sp-16)}
header nav .navContent ul .textlink{color:var(--color-crema);text-align:center;font-size:var(--text-h2)}
header article{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-16);width:100%;padding:var(--sp-16);text-align:center;justify-items:center;height:50%;position:relative;z-index:3}
header article h1{font-size:var(--text-display)}

@media (min-width:1200px){
  header{background:url("../img/bannerHeader.avif"),var(--color-espresso);background-blend-mode:luminosity;background-size:cover;background-position:center;--x:-500px;--y:-500px}
  header::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("../img/bannerHeader.avif");background-size:cover;background-position:center;z-index:2;-webkit-mask-image:radial-gradient(circle 150px at var(--x) var(--y),black 100%,transparent 0%);mask-image:radial-gradient(circle 150px at var(--x) var(--y),black 100%,transparent 0%);pointer-events:none}
  header nav .navContent{position:relative;display:grid;justify-items:end;grid-template-columns:85% 15%;height:auto;gap:0;padding:0;right:0;background:0 0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);align-items:center;justify-content:space-between;width:100%}
  header nav .navContent ul{flex-direction:row;justify-content:center;gap:var(--sp-48)}
  header nav .navContent ul .textlink{font-size:var(--text-nav)}
  header nav #manu-hamburger{display:none}
  header article{position:relative;z-index:10}
}

header::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("../img/bannerHeader.avif");background-size:cover;background-position:center;z-index:2;-webkit-mask-image:radial-gradient(circle 150px at var(--x) var(--y),black 100%,transparent 0%);mask-image:radial-gradient(circle 150px at var(--x) var(--y),black 100%,transparent 0%);pointer-events:none}
#hamburger:checked~.navContent{right:0}

/* NOSOTROS */
#nosotros{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%;gap:var(--sp-16)}
#nosotros .marquee{width:100%;overflow:hidden;display:flex}
#nosotros .marquee .marquee-content{display:flex;white-space:nowrap;animation:scroll-right 30s linear infinite}
#nosotros .marquee .marquee-content h2{font-size:15vw;width:100%;white-space:nowrap;overflow-x:hidden}
#nosotros .marquee-wrapper{width:100%;overflow:hidden;padding:20px 0}
#nosotros .marquee-wrapper .imgConteiner{display:flex;width:max-content;gap:var(--sp-8);animation:scroll-images 30s linear infinite}
#nosotros .marquee-wrapper .imgConteiner img{width:70vw;height:auto;object-fit:cover}
#nosotros .marquee-wrapper .imgConteiner:hover{animation-play-state:paused}
#nosotros h3,#nosotros p{color:var(--color-espresso);text-align:center;padding:var(--sp-16)}
@media (min-width:768px){#nosotros .marquee-wrapper .imgConteiner img{width:40vw}}

@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes scroll-images{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - var(--sp-8)/ 2))}}

/* MENÚ */
#menu{display:grid;grid-template-columns:repeat(1,100%);padding-left:var(--sp-16);padding-right:var(--sp-16);align-items:center;justify-items:center;color:var(--color-espresso);gap:var(--sp-16)}
#menu h2{margin-bottom:var(--sp-16)}
#menu article{padding:var(--sp-16);color:var(--color-crema);width:100%;height:40vh;filter:grayscale(100%);display:flex;flex-direction:column;gap:var(--sp-16);transition:ease-out .8s;cursor:pointer}
#menu article h3,#menu article p{opacity:0;transition:ease-out .8s}
#menu article:hover{filter:grayscale(0)}
#menu article:hover h3,#menu article:hover p{opacity:100%}
#menu article:nth-child(2){background:linear-gradient(rgba(44,26,14,.6),rgba(44,26,14,.6)),url("../img/gallo.avif") center/cover no-repeat}
#menu article:nth-child(3){background:linear-gradient(rgba(44,26,14,.6),rgba(44,26,14,.6)),url("../img/bowl.avif") center/cover no-repeat}
#menu article:nth-child(4){background: linear-gradient(rgba(44,26,14,.6),rgba(44,26,14,.6)),url("../img/sobreImg3.avif") center/cover no-repeat}
#menu article:nth-child(5){background:linear-gradient(rgba(44,26,14,.6),rgba(44,26,14,.6)),url("../img/cafe.avif") center/cover no-repeat}
#menu button{margin-top:var(--sp-16)}
@media (min-width:768px){#menu{grid-template-columns:repeat(2,1fr)}#menu h2{grid-column:1/3}#menu button,#menu h2{justify-self:start}}
@media (min-width:1200px){#menu{grid-template-columns:repeat(5,1fr)}#menu h2{grid-column:1/6}#menu article{height:65vh}#menu article:nth-child(2){grid-column:1/4}#menu article:nth-child(3){grid-column:4/6}#menu article:nth-child(4){grid-column:1/3}#menu article:nth-child(5){grid-column:3/6}}

/* EXPERIENCIA */
#experiencia{padding-left:var(--sp-16);padding-right:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-16)}
#experiencia article{padding:var(--sp-16);display:flex;gap:var(--sp-16);flex-direction:column;width:100%}
#experiencia article:first-child{background-color:var(--color-espresso)}
#experiencia article:first-child ul{display:flex;flex-direction:column;gap:var(--sp-16)}
#experiencia article:first-child ul li{display:flex;gap:var(--sp-8)}
#experiencia article:first-child .title:nth-child(5){font-size:var(--text-h3)}
#experiencia article:nth-child(2){background:linear-gradient(rgba(44,26,14,.65),rgba(44,26,14,.65)),url("../img/deliveryScene.avif") center/cover no-repeat;padding:var(--sp-48) var(--sp-16)}
#experiencia article:nth-child(2) button{align-self:center}
@media (min-width:1200px){#experiencia{flex-direction:row}#experiencia article:first-child{width:30%}#experiencia article:nth-child(2){width:70%;justify-self:center}#experiencia article:nth-child(2) button{align-self:flex-start}}

/* HORARIO */
#horario{display:flex;flex-direction:column;color:var(--color-espresso)}
#horario article,#horario iframe{width:100%;padding:var(--sp-16)}
#horario article{display:flex;flex-direction:column;gap:var(--sp-16)}
#horario article ul{padding:var(--sp-16) 0}
#horario article ul li{display:flex;justify-content:space-between;padding:var(--sp-16) 0}
#horario article ul li a{color:var(--color-espresso)}
#horario article ul li a:hover{color:var(--color-verde)!important}
@media (min-width:1200px){#horario{flex-direction:row;gap:var(--sp-16)}#horario iframe{height:auto}}

/* FOOTER */
footer{background-color:var(--color-crema-dark);padding:var(--sp-16);color:var(--color-espresso);display:flex;flex-direction:column;gap:var(--sp-16)}
footer article{padding:var(--sp-48) 0 0;display:flex;align-items:center;text-align:center;flex-direction:column;gap:var(--sp-16)}
footer article .logo{
    width:100%;
    height: 10em;
    padding-bottom:var(--sp-8)
}
footer article ul{display:flex;flex-direction:row;gap:var(--sp-48)}
footer ul{display:flex;flex-direction:column;gap:var(--sp-16);padding-top:var(--sp-16);align-items:center;text-align:center}
footer ul a{color:var(--color-espresso)}
footer ul a:hover{color:var(--color-verde)!important}
@media (min-width:1200px){
    footer{
        flex-direction:row;justify-content:space-between;align-items:center;gap:var(--sp-48)
    }
    footer article{
        align-items:start;
        text-align: start;

}
footer ul
{
    align-items:start
}
footer ul:nth-child(3){align-items:end;text-align:end}}