/* Generado por scripts/web.py desde boceto/f-brunch-y-bakery.html: no editar a mano. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/cinzel-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/cinzel-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/albert-sans-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/albert-sans-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* Sólo mecánica común. Tipos, colores, cabecera, botones y cajas los pone cada dirección. */
:root {
  --abierto: #2f8a5f;
  --cerrado: #b4483c;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cab: 76px;
  --alto-hero: calc(100vh - var(--cab));
}
@supports (height: 100svh) {
  :root { --alto-hero: calc(100svh - var(--cab)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, p { margin: 0; }
.logo { display: block; width: 100%; height: auto; }

.chip { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.chip::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.chip[data-abierto='si']::before { background: var(--abierto); opacity: 1; box-shadow: 0 0 0 3px rgb(47 138 95 / 0.18); }
.chip[data-abierto='no']::before { background: var(--cerrado); opacity: 1; }

.menu-btn, .barra { display: none; }

@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.entra { animation: entra 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes menu { from { opacity: 0; transform: scale(0.96); } }

@media (prefers-reduced-motion: reduce) {
  .entra, .nav.abierto ul { animation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

@media (max-width: 860px) {
  :root { --cab: 64px; }
  .cab .nav ul, .cab .nav .cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; cursor: pointer; }
  .cab .nav.abierto ul {
    display: flex; flex-direction: column;
    position: absolute; right: 12px; top: calc(var(--cab) - 4px); z-index: 40;
    min-width: 220px; margin: 0; padding: 8px; list-style: none;
    transform-origin: top right; animation: menu 180ms var(--ease-out);
  }
  .nav.abierto ul a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .barra {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .barra > * { width: 100%; }
}

.i-0 { --i: 0; }
.i-1 { --i: 1; }
.i-2 { --i: 2; }
.i-3 { --i: 3; }
.i-4 { --i: 4; }
.i-5 { --i: 5; }
.i-6 { --i: 6; }
.i-7 { --i: 7; }

/* ---- Hero F ---- */
  :root {
    --blanco: #ffffff;
    --tinta: #2a2925;
    --tinta-2: #57524a;
    --topo: #7a6753;
    --oro: #b4883a;
    --verde: #24503f;
    --verde-hondo: #193a2d;
    --raya: #e2d6bd;
    --romana: 'Cinzel', 'Trajan Pro', serif;
    --texto: 'Albert Sans', system-ui, sans-serif;
    --tira: clamp(120px, 17vh, 156px);
    --cab: 82px;
  }
  body { background: var(--blanco); color: var(--tinta); font: 500 16px/1.5 var(--texto); }

  /* La raya con punto del logo, como separador de toda la página */
  .raya { position: relative; height: 1px; background: var(--raya); }
  .raya::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--oro); }

  /* Cabecera: versalitas espaciadas, puntos dorados, botón rectangular */
  .cab {
    position: relative; z-index: 20;
    height: var(--cab);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 0 clamp(16px, 3.2vw, 48px);
  }
  .marca { display: block; width: 64px; border-radius: 50%; }
  .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
  .nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
  .nav ul li + li::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 clamp(6px, 1vw, 14px); border-radius: 50%; background: var(--oro); vertical-align: middle; }
  .nav ul li { display: flex; align-items: center; }
  .nav ul a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px;
    font: 700 13px/1 var(--texto); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--tinta);
    transition: color 180ms ease;
  }
  @media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--oro); } }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 52px; padding: 0 24px; border-radius: 3px; border: 1.5px solid transparent;
    font: 700 14px/1 var(--texto); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  }
  .btn:active { transform: scale(0.97); }
  .btn svg { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease-out); }
  .btn-verde { background: var(--verde); color: #fff; }
  .btn-linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
  @media (hover: hover) and (pointer: fine) {
    .btn-verde:hover { background: var(--verde-hondo); }
    .btn-verde:hover svg { transform: translateX(3px); }
    .btn-linea:hover { background: var(--tinta); color: #fff; }
  }
  .cta { min-height: 46px; padding: 0 18px; font-size: 13px; }
  a:focus-visible, button:focus-visible { outline: 2.5px solid var(--oro); outline-offset: 3px; }

  /* Hero: díptico salado | dulce, el logo en la costura */
  .hero {
    height: var(--alto-hero); min-height: 500px;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    padding: 0 clamp(16px, 3.2vw, 48px);
  }
  .diptico { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
  .mitad { position: relative; margin: 0; overflow: hidden; background: #e9e2d5; }
  .mitad img { width: 100%; height: 100%; object-fit: cover; }
  .brunch img { object-position: 50% 58%; }
  .bakery img { object-position: 50% 40%; }
  .rotulo {
    position: absolute; bottom: 0; padding: clamp(14px, 2.2vh, 22px) clamp(18px, 2vw, 28px) clamp(14px, 2vh, 20px);
    background: var(--blanco);
    display: grid; gap: 6px;
  }
  .brunch .rotulo { left: 0; }
  .bakery .rotulo { right: 0; text-align: right; }
  .pal { font: 600 clamp(32px, min(3.6vw, 6.4vh), 56px)/1 var(--romana); letter-spacing: 0.12em; margin-right: -0.12em; color: var(--tinta); }
  .linea { max-width: 30ch; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
  .bakery .linea { margin-left: auto; }
  .sello {
    position: absolute; z-index: 3; left: 50%; top: 46%;
    width: clamp(150px, min(15vw, 26vh), 230px);
    translate: -50% -50%;
    border-radius: 50%;
    box-shadow: 0 0 0 10px var(--blanco), 0 20px 40px -14px rgb(42 41 37 / 0.45);
  }

  .tira {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(20px, 3vw, 48px);
    min-height: var(--tira); padding: clamp(14px, 2vh, 22px) 0;
  }
  .tira .raya { grid-column: 1 / -1; margin-bottom: clamp(4px, 1vh, 10px); }
  .tira h1 { font: 700 clamp(25px, min(2.4vw, 4.2vh), 36px)/1.15 var(--texto); letter-spacing: -0.015em; text-wrap: balance; }
  .tira .datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 8px; font-size: 14.5px; color: var(--tinta-2); }
  .tira .datos b { color: var(--tinta); }
  .chip { font: 600 14px/1 var(--texto); color: var(--tinta); }
  .acciones { display: flex; gap: 10px; }

  @media (max-width: 860px) {
    :root { --cab: 66px; }
    .marca { width: 50px; }
    .menu-btn { padding: 0 16px; border: 1.5px solid var(--tinta); border-radius: 3px; background: #fff; color: var(--tinta); font: 700 13px/1 var(--texto); letter-spacing: 0.12em; text-transform: uppercase; }
    .nav.abierto ul { background: #fff; border: 1px solid var(--raya); border-radius: 4px; box-shadow: 0 12px 30px rgb(42 41 37 / 0.14); align-items: stretch; }
    .nav.abierto ul li { display: block; }
    .nav.abierto ul li + li::before { display: none; }
    .nav.abierto ul a { justify-content: flex-start; }

    .hero { height: auto; min-height: 0; padding: 0 12px; }
    .diptico { grid-template-columns: 1fr; gap: 10px; }
    .mitad { height: 30vh; height: 30svh; min-height: 210px; }
    .rotulo { padding: 10px 14px; }
    .pal { font-size: 30px; }
    .linea { display: none; }
    .sello { top: 50%; left: auto; right: 18px; translate: 0 -50%; width: 112px; box-shadow: 0 0 0 7px #fff, 0 14px 30px -12px rgb(42 41 37 / 0.45); }
    .tira { grid-template-columns: 1fr; padding: 14px 4px 20px; }
    .tira h1 { font-size: 24px; }
    .acciones { display: none; }
    .barra { background: rgb(255 255 255 / 0.97); border-top: 1px solid var(--raya); }
    .barra .btn { padding: 0 12px; }
  }