/* De Vera - Cocina & Grill — propuesta de YCOS.
   Medidas, colores y tipografías tomados de deveragrill.com (Montserrat, Jost y Libre Baskerville; dorado #bfa15c). */
:root {
  --gold: #bfa15c;
  --gold-2: #cdb26e;
  --ink: #2f2e2e;
  --ink-2: #3a3a38;
  --text: #4c4a47;
  --muted: #6f6f6b;
  --soft: #9a9a95;
  --line: rgb(0 0 0 / 0.06);
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --head: "Jost", "Futura", "Century Gothic", sans-serif;
  --libre: "Libre Baskerville", Georgia, serif;
  --header-h: 200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: 0.02em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--18 { width: 18px; height: 18px; }
.ico--24 { width: 24px; height: 24px; }
.ico--26 { width: 26px; height: 26px; }

/* Aviso de propuesta (no está en su sitio: aclara que no es el oficial) */
.proposal { margin: 0; padding: 6px 16px; background: var(--ink); color: #f3f1ec; font-size: 12px; text-align: center; }
.proposal a { text-decoration: underline; }

/* ---------------- Encabezado ---------------- */
.header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / 0.06); }
.header__top { max-width: 1200px; margin: 0 auto; padding: 24px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
.header__address { display: none; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--muted); transition: color .15s; }
.header__address .ico { margin-top: 2px; color: var(--gold); }
.header__address:hover { color: var(--gold); }
.header__logo { justify-self: start; }
.header__logo img { height: 112px; width: auto; object-fit: contain; }
.header__social { justify-self: end; }
.social { display: flex; align-items: center; gap: 20px; color: #1a1a1a; }
.social a { transition: transform .15s; }
.social a:hover { transform: scale(1.1); }
.social--36 img { width: 36px; height: 36px; object-fit: contain; }
.social--24 { gap: 16px; }
.social--24 img { width: 24px; height: 24px; object-fit: contain; }
.header__bar { border-top: 1px solid rgb(0 0 0 / 0.05); }

.nav { display: none; max-width: 1200px; margin: 0 auto; padding: 16px 20px; align-items: center; justify-content: center; gap: 32px; }
.nav__item { position: relative; }
.nav__link { font-size: 19px; letter-spacing: 0.025em; color: var(--ink-2); transition: color .15s; }
.nav__link:hover, .nav__link[aria-current="page"], .nav__item.is-active > .nav__link { color: var(--gold); }
.nav__sub { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 12px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 50; }
.has-sub:hover .nav__sub, .has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; }
.nav__subbox { min-width: 190px; padding: 8px 0; background: #fff; border: 1px solid rgb(0 0 0 / 0.1); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.nav__subbox a { display: block; padding: 8px 20px; font-size: 15px; white-space: nowrap; color: var(--ink-2); transition: color .15s; }
.nav__subbox a:hover, .nav__subbox a[aria-current="page"] { color: var(--gold); }
.nav__pedidos { display: inline-block; background: var(--gold); color: #fff; font-size: 18px; padding: 12px 28px; transition: background-color .15s; }
.nav__pedidos:hover { background: var(--gold-2); }
.nav__pin { display: inline-flex; color: var(--gold); transition: transform .15s; }
.nav__pin:hover { transform: scale(1.1); }

.mbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; }
.mbar__label { font-size: 13px; color: var(--muted); }
.mbar__tools { display: flex; align-items: center; gap: 8px; }
.mbar__pin { padding: 8px; color: var(--gold); display: inline-flex; }
.mbar__toggle { padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 40px; }
.mbar__toggle span { display: block; height: 2px; width: 24px; background: var(--ink); transition: transform .2s, opacity .2s; }
.mbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mnav { background: #fff; border-top: 1px solid rgb(0 0 0 / 0.1); padding: 12px 20px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
.mnav__row { border-bottom: 1px solid rgb(0 0 0 / 0.05); }
.mnav__link, .mnav__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--ink); font-size: 16px; text-align: left; }
.mnav__link[aria-current="page"] { color: var(--gold); }
.mnav__sign { color: var(--gold); }
.mnav__sub { padding: 0 0 8px 16px; }
.mnav__sub a { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.mnav__sub a.mnav__see { color: var(--muted); }
.mnav__sub a[aria-current="page"] { color: var(--gold); }
.mnav__pedidos { color: var(--gold); font-weight: 600; }
.mnav__social { margin-top: 12px; }

@media (max-width: 1023px) {
  .header__top { padding: 16px 20px 14px; }
  .header__logo img { height: auto; max-height: 84px; max-width: 100%; }
  .social--36 { gap: 14px; }
  .social--36 img { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
  .social--36 { gap: 10px; }
  .social--36 img { width: 24px; height: 24px; }
}
@media (min-width: 1024px) {
  .header__top { grid-template-columns: repeat(3, 1fr); }
  .header__address { display: flex; }
  .header__logo { justify-self: center; }
  .nav { display: flex; }
  .mbar, .mnav { display: none !important; }
}
@media (min-width: 1280px) { .nav { gap: 40px; } }

/* ---------------- Bloques comunes ---------------- */
.wrap { position: relative; max-width: 1000px; margin: 0 auto; padding: 32px 20px; }
.rel { position: relative; }
.photo { position: relative; overflow: hidden; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo.map > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.r43 { aspect-ratio: 4 / 3; }
.r34 { aspect-ratio: 3 / 4; }
.r45 { aspect-ratio: 4 / 5; }
.hero { position: relative; height: 340px; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) { .hero { height: 440px; } }

.eyebrow { font-size: 13px; letter-spacing: 0.12em; color: var(--soft); }
.h-gold { margin-top: 8px; font-family: var(--libre); font-style: italic; color: var(--gold); font-size: 28px; line-height: 1.3; letter-spacing: 0; }
.h-gold--narrow { max-width: 210px; margin-top: 0; line-height: 1.25; }
.h-gold--center { text-align: center; font-size: 36px; }
.h-gold--h1 { font-size: 30px; margin-top: 0; }
.h-gold--big { margin-top: 12px; font-size: 30px; line-height: 1.25; }
.h-gold--gap { margin-top: 40px; }
@media (min-width: 640px) { .h-gold { font-size: 30px; } .h-gold--center { font-size: 40px; } .h-gold--big { font-size: 36px; } }
.txt { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 300px; white-space: pre-line; }
.txt--275 { max-width: 275px; }
.txt--400 { max-width: 400px; }
.txt--justify { text-align: justify; }
.txt--tight { margin-top: 4px; max-width: none; }
.txt--muted { margin-top: 16px; max-width: 360px; color: var(--muted); }
.txt--soft { margin-top: 4px; color: var(--soft); }
.txt + .txt--soft { margin-top: 4px; }
.txt--soft + .txt--soft { margin-top: 0; }
.stack { max-width: 380px; }
.stack .txt { max-width: none; margin-top: 16px; }
.stack .txt:first-child { margin-top: 0; }
.kicker { font-size: 12px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.label { margin-top: 16px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.btn-line { display: inline-block; margin-top: 24px; padding: 10px 22px; border: 1px solid var(--gold); color: #8c7136; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color .15s, color .15s; }
.btn-line:hover { background: var(--gold); color: #fff; }
.cta-line { text-align: center; padding: 8px 0 24px; }

.split { padding: 40px 0; display: grid; gap: 32px; align-items: center; }
.split--top { align-items: start; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split--38 { grid-template-columns: 38% 1fr; align-items: start; }
}

.deco { display: none; position: absolute; z-index: 10; pointer-events: none; user-select: none; }
@media (min-width: 768px) {
  .deco { display: block; }
  .deco--nosotros { right: 20px; top: -32px; width: 160px; height: 160px; }
  .deco--rest { right: 0; top: 0; width: 144px; height: 144px; }
  .deco--promo { right: 28px; top: -48px; width: 112px; height: 112px; }
  .deco--eventos { left: 52%; transform: translateX(-50%); top: -12px; width: 144px; height: 144px; }
}

/* Numerados (Nosotros) */
.steps { list-style: none; margin-top: 24px; padding: 0; max-width: 320px; display: grid; gap: 20px; }
.steps li { display: flex; gap: 16px; }
.steps__n { width: 24px; flex: none; text-align: center; font-family: var(--libre); font-size: 30px; line-height: 1; color: var(--gold); }
.steps__t { flex: 1; font-size: 15px; line-height: 1.7; color: var(--text); border-left: 1px solid #d8d6d0; padding-left: 16px; }

/* ---------------- Home ---------------- */
.strip { padding: 8px 8px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .strip { padding: 12px 16px 0; gap: 12px; } }
@media (min-width: 1024px) { .strip { padding: 12px 24px 0; gap: 16px; grid-template-columns: repeat(4, 1fr); } }
.hsec { position: relative; padding: 56px 0; display: grid; gap: 32px; align-items: start; }
.hsec__text { padding-top: 24px; }
.hsec__text--narrow { max-width: 290px; }
.leaf, .hsec__plate { display: none; position: absolute; pointer-events: none; user-select: none; }
.beef { margin-top: 32px; width: 340px; max-width: 100%; background: #e9e7e2; padding: 28px 32px; text-align: center; }
.beef__small { font-size: 12px; letter-spacing: 0.18em; color: #8a8a86; }
.beef__big { margin-top: 4px; font-family: var(--libre); font-size: 26px; color: var(--ink); }
@media (min-width: 768px) {
  .hsec { grid-template-columns: 1fr 1fr; gap: 48px; }
  .md-r45 { aspect-ratio: 4 / 5; }
  .leaf { display: block; }
  .leaf--monstera { right: -12px; top: 8px; width: 115px; }
  .leaf--palm { right: 0; top: 8px; width: 110px; z-index: 0; }
  .hsec__plate { display: block; left: 49%; transform: translateX(-50%); top: 4px; width: 195px; z-index: 10; }
  .hsec__push { padding-top: 90px; }
}

/* ---------------- Menú (igual al de su sitio, sin precios) ---------------- */
.menu { background: #fff; padding: 56px 0; }
.menu__inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.menu__title { text-align: center; font-family: var(--body); letter-spacing: 0.15em; color: var(--ink); font-size: 26px; margin-bottom: 48px; }
@media (min-width: 640px) { .menu__title { font-size: 30px; } }
.msec { margin-bottom: 56px; }
.msec__title { text-align: center; font-family: var(--body); letter-spacing: 0.25em; color: var(--gold); font-size: 22px; }
.msec__sub { text-align: center; color: var(--soft); font-size: 14px; margin: 8px 0 32px; }
.msec__grid { display: grid; gap: 32px 48px; margin-top: 24px; }
@media (min-width: 640px) { .msec__grid { grid-template-columns: 1fr 1fr; } }
.dish { text-align: center; }
.dish__name { font-family: var(--body); font-size: 15px; color: var(--ink); letter-spacing: 0.025em; }
.star { color: var(--gold); }
.dish__desc { margin: 6px auto 0; max-width: 340px; font-style: italic; font-size: 13px; line-height: 1.625; color: #8a8a86; }
.dish__tags { margin-top: 8px; display: flex; justify-content: center; gap: 8px; }
.tagpill { display: inline-flex; align-items: center; font-size: 11px; color: var(--muted); border: 1px solid #dcdad3; border-radius: 999px; padding: 2px 8px; }

/* ---------------- Cada carta (/cartas/<carta>/): hoja blanca sobre una foto, como las suyas ---------------- */
.cpage { min-height: 100vh; background-size: cover; background-position: center; background-attachment: fixed; }
@media (hover: none) { .cpage { background-attachment: scroll; } }
.cpage__shade { min-height: 100vh; background: rgb(0 0 0 / 0.1); }
.cpage__sheet { max-width: 900px; min-height: 100vh; margin: 0 auto; background: #fff; padding: 48px 20px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
@media (min-width: 640px) { .cpage__sheet { padding: 48px 48px; } }
.cpage__logo { display: flex; justify-content: center; }
.cpage__logo img { height: 62px; width: auto; }
.cpage__title { margin-top: 28px; text-align: center; font-family: var(--libre); font-size: 30px; text-transform: uppercase; letter-spacing: 0.04em; color: #1a1a1a; }
.cintro { margin-top: 48px; display: grid; gap: 32px 48px; text-align: center; }
@media (min-width: 640px) { .cintro { grid-template-columns: 1fr 1fr; } .cintro--one { grid-template-columns: 1fr; } }
.cintro h2 { font-family: var(--body); font-size: 15px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); }
.cintro p { margin-top: 6px; font-size: 13px; color: #8a8a86; }
.cintro p.gold { font-size: 14px; color: #9c8243; }
.cpage__back { margin-top: 56px; text-align: center; }
.cpage__back a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #9c8243; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* La carta de YCOS con el estilo de sus cartas */
body .ycos-carta {
  --yc-accent: var(--gold);
  --yc-accent-text: #fff;
  --yc-bg: #fff;
  --yc-text: var(--ink);
  --yc-muted: #8a8a86;
  --yc-border: #dcdad3;
  --yc-soft: #f6f4ef;
  --yc-sticky-top: 0px;
  margin-top: 40px;
  font-family: var(--body);
}
body .ycos-carta .yc-tools { max-width: 520px; margin: 0 auto 8px; }
body .ycos-carta .yc-search { border-radius: 999px; border-color: #dcdad3; font-size: 14px; text-align: center; }
/* Cada página muestra una sola carta: sin la fila de secciones ni el nombre repetido (ya está en el título) */
/* la fila de secciones la oculta la propia carta (data-seccion) */
.standalone--carta .ycos-carta .yc-section--l1 > .yc-section__title { display: none; }
body .ycos-carta .yc-section--l1 { margin-top: 0; }
/* Secciones: ENTRADAS, PRINCIPALES… en dorado con una línea, como en sus cartas */
body .ycos-carta .yc-section--l2 { margin-top: 48px; }
body .ycos-carta .yc-section--l2 > .yc-section__title { font-family: var(--libre); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); text-align: center; padding-bottom: 16px; border-bottom: 1px solid #e6e2d8; max-width: 820px; margin: 0 auto; }
body .ycos-carta .yc-section__when { text-align: center; }
body .ycos-carta .yc-items { column-gap: 48px; row-gap: 32px; margin-top: 32px; }
@media (min-width: 640px) { body .ycos-carta .yc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .ycos-carta .yc-item { border: 0; }
body .ycos-carta .yc-item__open { justify-content: center; text-align: center; padding: 4px 0; flex-direction: column; align-items: center; }
body .ycos-carta .yc-item__text { align-items: center; gap: 6px; }
body .ycos-carta .yc-item__name { font-weight: 400; font-size: 15px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); }
body .ycos-carta .yc-item:has(.yc-tag--recomendado) .yc-item__name::before { content: "★ "; color: var(--gold); }
body .ycos-carta .yc-tag--recomendado { display: none; }
body .ycos-carta .yc-item__desc { font-size: 13px; line-height: 1.6; max-width: 340px; color: #8a8a86; }
body .ycos-carta .yc-tags { justify-content: center; order: 3; }
body .ycos-carta .yc-tag { font-size: 11px; font-weight: 400; padding: 2px 8px; border: 1px solid #dcdad3; background: transparent; color: var(--muted); }
body .ycos-carta .yc-item__price { order: 4; font-weight: 400; font-size: 14px; color: #9c8243; }
body .ycos-carta .yc-item__sizes, body .ycos-carta .yc-item__when { order: 5; }
body .ycos-carta .yc-item__img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 3 / 2; border-radius: 0; order: -1; }
body .ycos-carta .yc-item__open:hover .yc-item__name { color: #9c8243; }

/* ---------------- Corporativos ---------------- */
.packs { padding: 40px 0; display: grid; gap: 40px; }
@media (min-width: 640px) { .packs { grid-template-columns: 1fr 1fr; gap: 48px; } }
.pk { margin-top: 32px; display: grid; gap: 4px; font-size: 15px; line-height: 1.6; color: var(--text); }
.clients { padding: 40px 0; }
.clients__grid { margin-top: 48px; columns: 2; column-gap: 32px; }
@media (min-width: 640px) { .clients__grid { columns: 3; } }
@media (min-width: 1024px) { .clients__grid { columns: 4; } }
.clients__logo { break-inside: avoid; margin-bottom: 32px; display: flex; justify-content: center; align-items: center; }
.clients__logo img { max-height: 96px; width: auto; object-fit: contain; }

/* ---------------- Galería ---------------- */
.gallery { padding: 48px 0; }
.carousel { position: relative; }
.carousel__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { position: relative; flex: none; width: 88%; aspect-ratio: 3 / 2; scroll-snap-align: start; }
@media (min-width: 640px) { .carousel__slide { width: 49%; } }
.carousel__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.carousel__btn:hover { color: #fff; }
.carousel__btn--prev { left: 4px; }
.carousel__btn--next { right: 4px; }

/* ---------------- Contacto y Reservas ---------------- */
.cinfo { padding: 40px 0; display: grid; gap: 40px; align-items: start; }
@media (min-width: 768px) { .cinfo { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cinfo__block { padding: 32px 0; border-top: 1px solid rgb(0 0 0 / 0.05); }
.cinfo__block:first-child { padding-top: 0; border-top: 0; }
.cinfo__block:last-child { padding-bottom: 0; }
.cinfo__title { display: flex; align-items: center; gap: 12px; font-family: var(--libre); font-style: italic; color: var(--gold); font-size: 26px; letter-spacing: 0; }
@media (min-width: 640px) { .cinfo__title { font-size: 28px; } }
.cinfo__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(191 161 92 / 0.4); }
.cinfo__icon .ico { width: 18px; height: 18px; }
.cinfo__map { position: relative; height: 460px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); outline: 1px solid rgb(0 0 0 / 0.05); }
@media (min-width: 768px) { .cinfo__map { position: sticky; top: calc(var(--header-h) + 16px); } }
.cinfo__map iframe { width: 100%; height: 100%; border: 0; }
.mail { display: inline-block; font-size: 15px; color: var(--text); transition: color .15s; }
.mail:hover { color: var(--gold); }
.hours { margin-top: 16px; }
.hours table { border-collapse: collapse; max-width: 300px; width: 100%; font-size: 15px; color: var(--text); }
.hours th { text-align: left; font-weight: 400; padding: 3px 24px 3px 0; }
.hours td { text-align: right; color: var(--ink); padding: 3px 0; white-space: nowrap; }
.pill { margin-top: 16px; display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; border: 1px solid var(--gold); padding: 10px 20px; color: #9c8243; transition: background-color .15s, color .15s; }
.pill span { font-family: var(--libre); font-style: italic; font-size: 18px; }
.pill:hover { background: var(--gold); color: #fff; }
.pill--big { margin-top: 28px; padding: 12px 24px; }
.pill--big span { font-size: 22px; }
@media (max-width: 380px) { .pill--big span { font-size: 18px; } }

/* ---------------- Cartas (página propia) ---------------- */
.standalone { background: #fff; }
.cartas { position: relative; min-height: 100vh; background-size: cover; background-position: center; background-attachment: fixed; }
.cartas::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0.45); }
.cartas__inner { position: relative; max-width: 1000px; margin: 0 auto; padding: 48px 20px; }
.cartas__logo { display: flex; justify-content: center; }
.cartas__logo img { height: 70px; width: auto; }
.cartas__grid { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 640px) { .cartas__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .cartas__grid { grid-template-columns: repeat(3, 1fr); } }
.ccard { display: block; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.ccard__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.ccard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ccard:hover .ccard__img img { transform: scale(1.05); }
.ccard__name { background: #c8bc9c; padding: 16px; text-align: center; font-size: 15px; letter-spacing: 0.12em; color: #4a4a48; text-transform: uppercase; }
.standalone__note { margin: 0; padding: 10px 16px; text-align: center; font-size: 12px; color: var(--muted); background: #fff; }
.standalone__note a { text-decoration: underline; }
@media (hover: none) { .cartas { background-attachment: scroll; } }

/* ---------------- Pie: contacto con fondo de madera ---------------- */
.footer { position: relative; background: #3b2a1e url("https://www.deveragrill.com/img/footer-wood.jpg") center / cover; color: #fff; }
.footer::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.05); }
.footer__inner { position: relative; max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.footer__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr auto; } }
.footer__title { font-family: var(--libre); font-style: italic; font-size: 36px; margin-bottom: 24px; letter-spacing: 0; text-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.contact { max-width: 480px; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.contact__col { display: grid; gap: 8px; }
.contact input, .contact textarea { width: 100%; background: #fff; border: 1px solid #fff; color: var(--ink); font: 14px var(--body); padding: 10px 12px; border-radius: 0; }
.contact input::placeholder, .contact textarea::placeholder { color: #8c7136; opacity: 1; }
.contact textarea { height: 100%; min-height: 150px; resize: none; padding: 12px; }
.contact input[aria-invalid="true"], .contact textarea[aria-invalid="true"] { border-color: #e7b0a6; box-shadow: 0 0 0 2px #c0392b; }
.contact__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 12px; }
.contact__msg { font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.contact button { background: #8f8b4e; color: #fff; font-size: 14px; padding: 6px 24px; transition: background-color .15s; }
.contact button:hover { background: #7d7943; }
@media (max-width: 479px) { .contact__grid { grid-template-columns: 1fr; } }
.footer__map { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #fff; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: background-color .15s; }
.footer__map:hover { background: var(--gold-2); }
.footer__badge { justify-self: center; width: 210px; height: 210px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2); }
@media (min-width: 768px) { .footer__badge { justify-self: end; } }
.footer__badge img { width: 198px; height: 198px; object-fit: contain; }
.footer__copy { position: relative; margin: 0; padding: 0 16px 24px; text-align: center; font-size: 12px; color: rgb(255 255 255 / 0.8); }
.footer__copy a { text-decoration: underline; }