/* grupodevilla.com · una sola página: el selector.
   Cada mitad habla con la tipografía de su restaurante; el grupo, que todavía
   no tiene logo, firma solo con su nombre compuesto. */

@font-face{font-family:"Garamond MIAMO";src:url(garamond-bk.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sequel MIAMO";src:url(sequel-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Armavir MIAMO";src:url(armavir-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TrendSlab";src:url(trendslab.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nourd";src:url(nourd-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nourd";src:url(nourd-medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --fondo:#121110; --arena:#d8c4ad; --arena-2:rgba(216,196,173,.74);
  --blanco:#fff; --blanco-2:rgba(255,255,255,.74);
  --serif-miamo:"Garamond MIAMO", Georgia, serif;
  --sans-miamo:"Sequel MIAMO", Helvetica, Arial, sans-serif;
  --label-miamo:"Armavir MIAMO", "Arial Black", sans-serif;
  --serif-cantina:"TrendSlab", Georgia, serif;
  --sans-cantina:"Nourd", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--blanco);font-family:var(--sans-cantina);-webkit-font-smoothing:antialiased;overflow:hidden}

.selector{position:relative;display:flex;gap:2px;height:100svh;overflow:hidden}

.mitad{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;transition:flex-grow 1s var(--ease)}
.mitad:focus-visible{outline:2px solid var(--blanco);outline-offset:-6px}
/* Sin sepia a propósito: cada foto conserva el color de su marca. */
.mitad-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.04) brightness(.82);transition:filter 1s var(--ease);animation:acercar 1.8s var(--ease) both,derivar 20s 1.8s ease-in-out infinite alternate}
/* El velo llega alto: la foto de MIAMO es muy clara justo donde va el texto. */
.mitad::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.78) 26%,rgba(10,10,10,.42) 52%,rgba(10,10,10,0) 80%)}
.mitad-miamo{animation:barridoI 1.2s var(--ease) both}
.mitad-cantina{animation:barridoD 1.2s .12s var(--ease) both}

.mitad-copia{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(26px,4.5vw,64px);max-width:560px;animation:subir .9s .7s var(--ease) backwards}
.mitad-cantina .mitad-copia{animation-delay:.82s}

.etiqueta{font:700 11px/1.3 var(--label-miamo);text-transform:uppercase;letter-spacing:.16em;color:var(--arena-2)}
.mitad-cantina .etiqueta{font-family:var(--sans-cantina);font-weight:500;color:var(--blanco-2)}

.mitad-logo{display:block;height:auto}
.mitad-miamo .mitad-logo{width:clamp(150px,15vw,216px)}
.mitad-cantina .mitad-logo{width:clamp(168px,17vw,244px)}

.mitad-lema{font:400 clamp(19px,2.2vw,27px)/1.2 var(--serif-miamo);color:var(--arena)}
.mitad-cantina .mitad-lema{font-family:var(--serif-cantina);font-size:clamp(18px,2vw,25px);line-height:1.25;color:var(--blanco)}

.mitad-dir{font:400 14px/1.4 var(--sans-miamo);color:var(--arena-2);max-width:32ch}
.mitad-cantina .mitad-dir{font-family:var(--sans-cantina);color:var(--blanco-2)}

.mitad-cta{margin-top:6px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--arena);border-radius:4px;font:500 12px/1 var(--sans-miamo);letter-spacing:.12em;text-transform:uppercase;color:var(--arena);transition:background .4s var(--ease),color .4s var(--ease)}
.mitad-cantina .mitad-cta{border-color:var(--blanco);font-family:var(--sans-cantina);color:var(--blanco)}
.flecha{transition:transform .4s var(--ease)}

.firma{position:absolute;z-index:4;left:50%;top:0;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:9px;width:clamp(212px,20vw,286px);padding:26px 22px 30px;background:var(--fondo);border-radius:0 0 999px 999px;text-align:center;animation:caer 1.1s .5s var(--ease) backwards}
.firma-nombre{margin:0;font:500 clamp(13px,1.25vw,16px)/1.2 var(--sans-cantina);text-transform:uppercase;letter-spacing:.24em;color:var(--blanco)}
.firma-pregunta{margin:0;padding-top:9px;border-top:1px solid rgba(255,255,255,.2);font:400 13px/1.35 var(--sans-cantina);color:var(--blanco-2)}

@media (hover:hover){
  .mitad:hover{flex-grow:1.4}
  .selector:has(.mitad:hover) .mitad:not(:hover) .mitad-foto{filter:grayscale(.85) brightness(.45)}
  .mitad:hover .mitad-cta{background:var(--arena);color:var(--fondo)}
  .mitad-cantina:hover .mitad-cta{background:var(--blanco);color:var(--fondo)}
  .mitad:hover .flecha{transform:translateX(5px)}
}

@media (max-width:760px){
  .selector{flex-direction:column}
  .mitad-miamo{animation-name:barridoArriba}
  .mitad-cantina{animation-name:barridoAbajo}
  .mitad::after{background:linear-gradient(to top,rgba(10,10,10,.95) 0%,rgba(10,10,10,.5) 52%,rgba(10,10,10,.05) 82%)}
  .mitad-copia{gap:11px;padding:20px 22px 26px;max-width:none;width:100%}
  .mitad-cta{align-self:stretch;justify-content:center;font-size:11px;letter-spacing:.1em}
  .mitad-miamo .mitad-copia{padding-top:96px}
  .firma{width:216px;padding:16px 18px 20px;gap:7px}
  .firma-pregunta{padding-top:7px;font-size:12px}
}

@keyframes acercar{from{transform:scale(1.12)}to{transform:scale(1.03)}}
@keyframes derivar{from{transform:scale(1.03)}to{transform:scale(1.09)}}
@keyframes barridoI{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes barridoD{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes barridoArriba{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes barridoAbajo{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes subir{from{opacity:0;transform:translateY(14px)}}
@keyframes caer{from{opacity:0;transform:translateY(-100%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}