/* El Huerto Restaurante · estilos globales */
:root{color-scheme:light;--mor:#ad0058;--lima:#b4cd1a;--limat:#dcea6a;--ink:#251c22;--sub:#6f646b;--line:#e9e6e8;--bg:#fff;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;background:#fff}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.7 Figtree,system-ui,sans-serif}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Young Serif',Georgia,serif;font-weight:400;line-height:1.15;margin:0;color:var(--mor)}
h2::after,.hero h1::after{content:'';display:block;width:48px;height:4px;border-radius:2px;background:var(--lima);margin:.7rem 0 .4rem}
.hero h1::after{margin:.8rem auto .2rem}
h2{font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:.5rem}
p{margin:0 0 1rem;max-width:60ch}
.sub{color:var(--sub)}
a{color:inherit}
:focus-visible{outline:3px solid var(--mor);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:5rem 1.4rem}
.btn{display:inline-block;background:var(--mor);color:#fff;padding:.8rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:700}
.btn.alt{background:#fff;color:var(--mor);box-shadow:inset 0 0 0 2px var(--mor)}
.hero{text-align:center;padding:4rem 1.4rem 2rem}
.hero img.logo{width:min(340px,80%);margin:0 auto 1.5rem}
.hero h1{font-size:clamp(1.7rem,3.4vw,2.4rem);max-width:22ch;margin:0 auto 1rem}
.hero p{margin:0 auto 1.6rem}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.foto{max-width:1040px;margin:2.5rem auto 0;padding:0 1.4rem}
.foto img{width:100%;height:clamp(240px,42vw,460px);object-fit:cover;border-radius:10px}
.menu{background:var(--mor);color:#fff;border-radius:14px;display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;padding:2.8rem;align-items:center}
.menu h2{color:#fff}
.menu h2::after{background:var(--limat)}
.menu ul{list-style:none;padding:0;margin:1.2rem 0}
.menu li{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.25)}
.menu li b{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--limat)}
.precio{font:400 2rem 'Young Serif',serif;color:var(--limat)}
.menu .btn{background:#fff;color:var(--mor)}
.menu img{border-radius:8px;width:100%}
.platos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.platos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.dos{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:center}
.dos img{border-radius:10px;width:100%}
.amb{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.amb img{width:100%;height:300px;object-fit:cover;border-radius:8px}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
blockquote{margin:0;position:relative;padding:2.6rem 1.6rem 1.5rem;border:1px solid var(--line);border-top:4px solid var(--lima);border-radius:10px;box-shadow:0 6px 18px rgba(37,28,34,.06);display:flex;flex-direction:column;gap:1rem}
blockquote::before{content:'\201C';position:absolute;top:.2rem;left:1.2rem;font:400 4.2rem/1 'Young Serif',serif;color:var(--mor)}
blockquote .est{color:var(--lima);letter-spacing:.15em;font-size:1.05rem}
blockquote p{margin:0;font-size:1.05rem}
blockquote footer{margin-top:auto;display:flex;justify-content:space-between;gap:.6rem;font-size:.9rem;color:var(--sub);border-top:1px solid var(--line);padding-top:.8rem}
blockquote footer b{color:var(--ink)}
.mas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.nota{font-size:.85rem;color:var(--sub);font-style:italic}
#charito{background:#f3f7d8;position:relative;overflow:hidden}
#charito .wrap{position:relative;z-index:1}
#charito img.arco{border-radius:999px 999px 12px 12px;box-shadow:14px 14px 0 rgba(180,205,26,.5);aspect-ratio:4/5;object-fit:cover}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.2rem 0 0}
.chips li{background:#fff;border:1px solid rgba(173,0,88,.25);color:var(--mor);padding:.35rem .9rem;border-radius:999px;font-size:.9rem;font-weight:500}
.rama{position:absolute;right:-30px;top:-20px;width:240px;opacity:.55;z-index:0}
section,header.hero,footer#contacto{position:relative;overflow:hidden}
.hero>*,.menu>*{position:relative;z-index:1}
.d{position:absolute;pointer-events:none;z-index:0;opacity:.5;--stem:#ad0058;--leaf:#b4cd1a;height:auto}
.d.w{--stem:#fff;--leaf:#dcea6a;opacity:.3}
@media (max-width:800px){.d{opacity:.3}.d.w{opacity:.22}}
.wrap{position:relative;z-index:1}
.d{opacity:.55}
.d.l{left:-12px;transform-origin:0 50%}
.d.r{right:-12px;transform-origin:100% 50%}
.d.w{opacity:.32}
#cargando{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-content:center;justify-items:center;gap:1.6rem;transition:opacity .45s ease,visibility .45s;animation:salvar .4s ease 5s forwards}
#cargando.fuera{opacity:0;visibility:hidden}
#cargando img{width:min(240px,62vw);animation:entra .6s ease both}
#cargando .barra{width:130px;height:3px;border-radius:2px;background:rgba(180,205,26,.35);overflow:hidden}
#cargando .barra i{display:block;height:100%;width:100%;background:var(--mor);transform-origin:left;animation:llena .7s ease-out both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes llena{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes salvar{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#cargando img,#cargando .barra i{animation:none}}
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);display:flex;align-items:center;gap:1.4rem;padding:.5rem max(1.2rem,calc((100vw - 1040px)/2));border-bottom:1px solid var(--line);transition:box-shadow .3s}
nav.top.sombra{box-shadow:0 6px 20px rgba(37,28,34,.09)}
.brand img{height:48px;width:auto}
.links{display:flex;gap:1.5rem;margin-left:auto}
.links a{text-decoration:none;color:var(--ink);font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.links a:hover,.links a.on{color:var(--mor);border-color:var(--lima)}
.btn.sm{padding:.55rem 1.2rem;font-size:.95rem}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:1.7rem;color:var(--mor);cursor:pointer;line-height:1;padding:.2rem .4rem}
.hero{text-align:left;padding:0;background:radial-gradient(circle at 82% 35%,#f3f7d8 0,#fff 58%)}
.hero-in{max-width:1100px;margin:0 auto;padding:3rem 1.4rem 4.5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.kick{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mor);margin-bottom:1.2rem}
.kick::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--lima)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.04;margin:0 0 1.2rem;max-width:13ch;text-align:left}
.hero h1::after{display:none}
.hero h1 mark{background:linear-gradient(transparent 62%,var(--lima) 62%);color:inherit;padding:0 .08em}
.hero .sub{font-size:1.15rem;margin:0 0 1.8rem}
.hero .cta{justify-content:flex-start}
.vis{position:relative;height:clamp(380px,46vw,540px)}
.blob{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--mor);right:0;top:6%}
.vis .a{position:absolute;width:62%;aspect-ratio:3/4.1;object-fit:cover;object-position:35% 50%;border-radius:999px 999px 18px 18px;right:9%;top:0;box-shadow:0 22px 44px rgba(173,0,88,.28)}
.vis .b{position:absolute;width:38%;aspect-ratio:1;object-fit:cover;border-radius:50%;left:0;bottom:6%;border:6px solid #fff;box-shadow:0 14px 30px rgba(37,28,34,.22)}
.dot{position:absolute;width:62px;height:62px;border-radius:50%;background:var(--lima);left:15%;top:8%;animation:flota 5s ease-in-out infinite alternate}
.sello{position:absolute;width:112px;right:0;bottom:2%}
.gira{transform-origin:60px 60px;animation:gira 22s linear infinite}
.txt>*{animation:sube .7s ease both}
.txt>:nth-child(1){animation-delay:.8s}.txt>:nth-child(2){animation-delay:.9s}.txt>:nth-child(3){animation-delay:1s}.txt>:nth-child(4){animation-delay:1.1s}
.blob{animation:pop .9s cubic-bezier(.2,.8,.2,1) .8s both}
.vis .a{animation:pop .9s cubic-bezier(.2,.8,.2,1) .95s both}
.vis .b{animation:pop .9s cubic-bezier(.2,.8,.2,1) 1.15s both}
.sello{animation:pop .8s ease 1.3s both}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.93)}to{opacity:1;transform:none}}
@keyframes flota{to{transform:translateY(14px)}}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.txt>*,.blob,.vis .a,.vis .b,.sello,.dot,.gira{animation:none}}
@media (max-width:800px){
.hero-in{grid-template-columns:1fr;padding:2rem 1.2rem 3.5rem}
.links{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;padding:.4rem 1.4rem 1rem;border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(37,28,34,.08)}
.links.abierto{display:flex}
.links a{padding:.75rem 0}
.burger{display:block}
.brand img{height:42px}}
.vis{height:auto;aspect-ratio:1/1.08;width:100%}
.vis .blob{left:14%;top:7%;right:auto;width:66%;height:88%;aspect-ratio:auto;border-radius:999px 999px 18px 18px;background:var(--mor)}
.vis .a{left:24%;top:0;right:auto;width:66%;height:88%;aspect-ratio:auto;object-position:38% 50%;border-radius:999px 999px 18px 18px;box-shadow:none}
.vis .b{left:0;bottom:2%;width:34%;aspect-ratio:1;border-width:6px}
.vis .dot{left:auto;right:1%;top:14%;width:12%;height:auto;aspect-ratio:1}
.vis .sello{right:-2%;bottom:4%;width:26%}
@media (max-width:800px){.vis{max-width:420px;margin:0 auto}}
.platos figure{margin:0;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:3/4}
.platos figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;transition:transform .7s ease}
.platos figcaption{position:absolute;left:0;right:0;bottom:0;padding:3.4rem 1.1rem 1.1rem;color:#fff;background:linear-gradient(to top,rgba(173,0,88,.94) 0,rgba(173,0,88,.8) 60%,rgba(173,0,88,0))}
.platos h3{color:#fff;font-size:1.25rem}
.platos h3::after{content:'';display:block;width:34px;height:3px;border-radius:2px;background:var(--limat);margin:.5rem 0 0}
.platos figcaption p{margin:0;font-size:.92rem;line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin .4s ease}
.platos figure:hover img,.platos figure:focus-within img{transform:scale(1.08)}
.platos figure:hover figcaption p,.platos figure:focus-within figcaption p{max-height:7rem;opacity:1;margin-top:.6rem}
@media (hover:none){.platos figcaption p{max-height:none;opacity:1;margin-top:.5rem;font-size:.82rem}.platos figcaption{padding:2.6rem .8rem .8rem}.platos h3{font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){.platos figure img,.platos figcaption p{transition:none}}
.amb figure{margin:0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 rgba(180,205,26,0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-radius .5s ease}
.amb figure img{display:block;border-radius:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease}
@media (hover:hover){
.amb figure:hover{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--lima);border-radius:26px 8px 26px 8px}
.amb figure:hover img{transform:scale(1.08);filter:saturate(1.12) contrast(1.03)}}
@media (prefers-reduced-motion:reduce){.amb figure,.amb figure img{transition:none}}
#menu{scroll-margin-top:-2.5rem}
.menu .acc{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.menu .btn.comp{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff;border:0;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.menu .btn.comp:hover{background:rgba(255,255,255,.14)}
.menu.resalta{animation:resalta 1.6s ease .9s 2}
@keyframes resalta{0%,100%{box-shadow:0 0 0 0 rgba(180,205,26,0)}50%{box-shadow:0 0 0 12px rgba(180,205,26,.55)}}
#aviso{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.7rem 1.3rem;border-radius:999px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:60}
#aviso.v{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.menu.resalta{animation:none}}
hr{border:0;border-top:1px solid var(--line);margin:0 auto;max-width:1040px}
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
footer#contacto{background:var(--mor);color:#fff}
footer#contacto h2{color:#fff}
footer#contacto h2::after{background:var(--limat)}
footer#contacto .btn{background:#fff;color:var(--mor)}
footer#contacto .mapa{background:rgba(255,255,255,.12);color:#fff;border:1px dashed rgba(255,255,255,.5)}
.mapa{height:200px;border-radius:8px;background:#f4f2f3;display:grid;place-items:center;color:var(--sub);font-size:.9rem;margin-top:1rem}
@media (max-width:800px){
.menu,.dos,.amb,.res,.contacto{grid-template-columns:1fr}
.menu{padding:1.8rem 1.4rem}
.platos{grid-template-columns:1fr 1fr}
.wrap{padding:3.2rem 1.2rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}