/* Casa Mar — capa de estilo: rótulo, texturas, detalles y modo claro.
   Va después de site.css y solo añade o ajusta; sin este archivo la web sigue funcionando. */

/* 1 · «Casa Mar» con letra manuscrita, como el rótulo (solo las letras del nombre) */
@font-face {
    font-family: 'Casa Mar Rotulo';
    src: url(data:font/woff;base64,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) format('woff');
    font-weight: 700; font-style: normal; font-display: block;
}
:root {
    --red: #e8604c;
    --plant: #9dc1a6;
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='10' viewBox='0 0 96 10'%3E%3Cpath d='M2 5q5-5 10 0t10 0 10 0 10 0 10 0 10 0 10 0 10 0 10 0' fill='none' stroke='%23e9b44c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16' viewBox='0 0 26 16'%3E%3Cpath d='M1 13C8 12 16 9 25 3' fill='none' stroke='%239dc1a6' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M8 11.5c-1-3 1-6 4-7 0 3-2 6-4 7zM14 9c0-3 2-5.5 5-6-.5 3-2.5 5.5-5 6zM11 10.5c2.5 1.5 6 1.5 8 0-2.5-1.5-6-1.5-8 0z' fill='%239dc1a6'/%3E%3Ccircle cx='20.5' cy='8.5' r='1.6' fill='%23e9b44c'/%3E%3C/svg%3E");
}
.brand, .foot-title {
    font-family: 'Casa Mar Rotulo', var(--serif);
    font-weight: 700; letter-spacing: 0;
}
.brand { font-size: 56px; line-height: 1.05; }
.top.with-photo .brand { font-size: 50px; }
@media (min-width: 700px) { .brand { font-size: 74px; } }
@media (min-width: 700px) { .top.with-photo .brand { font-size: clamp(56px, 7.5vw, 72px); } }

/* 17 · Cabecera enmarcada como un cartel, con doble filete mostaza */
.top {
    margin: 0 -14px; padding: 22px 16px;
    border: 1px solid rgba(233, 180, 76, 0.45); border-radius: 22px;
    box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px rgba(233, 180, 76, 0.2);
    background: var(--bg);
}
@media (min-width: 700px) { .top { margin: 0 -24px; padding: 28px 24px; } }

/* 3 · Toque del rojo del rótulo */
.highlight svg { color: var(--red); }

/* 15 · El punto de «Abierto» late despacio */
.status:not(.is-closed) .dot { animation: latido 2.2s ease-out infinite; }
@keyframes latido {
    0% { box-shadow: 0 0 0 0 rgba(233, 180, 76, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(233, 180, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 180, 76, 0); }
}

/* 2 · Ondas del rótulo como separadores */
.menu-section + .menu-section::before,
.note::before {
    content: ''; display: block; width: 96px; height: 10px; margin: 0 auto 34px;
    background: var(--wave) center / contain no-repeat; opacity: .7;
}
.menu-section + .menu-section { padding-top: 34px; }

/* 7 y 10 · Ramita junto al nombre de sección y número grande de fondo */
.menu-section h2 { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.menu-section h2::before { content: ''; width: 26px; height: 16px; flex-shrink: 0; background: var(--sprig) center / contain no-repeat; }
.sec-num {
    position: absolute; right: 0; bottom: -12px; z-index: -1;
    font-family: var(--serif); font-size: 64px; line-height: 1; letter-spacing: 0;
    color: var(--ink); opacity: .07; pointer-events: none; user-select: none;
}
.menu-section { position: relative; z-index: 0; }

/* 9 · Precio con línea de puntos, como en las cartas de toda la vida */
.dish-line { display: flex; align-items: last baseline; gap: 8px; min-width: 0; }
.dish-line .dish-name { flex: 0 1 auto; min-width: 0; }
.leader { flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--line-strong); opacity: .55; transform: translateY(-6px); }
.dish-line .dish-price { flex-shrink: 0; white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--ink); }

/* 12 · «Agotado hoy» como un sello, en vez de tachar el plato */
.dish.sold-out .dish-name { text-decoration: none; color: var(--muted); }
.sold-tag {
    display: inline-block; transform: rotate(-8deg);
    padding: 4px 9px; border: 2px solid var(--red); border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--red);
    color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    opacity: .9;
}
.promo .sold-tag { color: #a3271a; border-color: #a3271a; box-shadow: inset 0 0 0 2px #e9b44c, inset 0 0 0 3px #a3271a; }

/* 11 · Mismo tono cálido para todas las fotos */
.dish-photo img, .photo-img, .head-photo img, .foot-photo {
    filter: saturate(1.08) contrast(1.05) sepia(.06);
}
.dish-photo.sold-out img { filter: grayscale(1); }

/* 5 y 8 · Grano de pizarra y viñeta suave */
.plants::before, .plants::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.plants::before {
    opacity: .06;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.plants::after { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.32) 100%); }

/* 6 · Plantas algo más altas para poder moverse al hacer scroll */
.plant { bottom: -30px; will-change: transform; }
.plant-right { transform: none; }

/* 13 · Aparición suave de la carta al bajar */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* 14 · El botón del pedido «salta» al añadir */
.cart-bar.bump { animation: salto .38s ease; }
@keyframes salto { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* 16 · Hojas y visor aparecen con suavidad */
.sheet:not([hidden]) { animation: hoja .28s cubic-bezier(.2, .8, .2, 1); }
.backdrop:not([hidden]) { animation: fundido .2s ease; }
@keyframes hoja { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

/* 18 y 19 · Pie con más carácter y mapa dibujado */
.foot { margin-top: 28px; }
.foot-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.foot-info { display: flex; flex-direction: column; gap: 10px; }
.foot-head { display: flex; align-items: center; gap: 14px; }
.foot-photo { width: 92px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid var(--accent); padding: 2px; flex-shrink: 0; }
.foot-title { margin: 0; font-size: 40px; line-height: 1.1; color: var(--ink); }
.foot .muted, .foot p { margin: 0; }
.hours-table { border-collapse: collapse; font-size: 14px; width: 100%; max-width: 300px; }
.hours-table td { padding: 4px 0; border-bottom: 1px dotted var(--line); color: var(--muted); }
.hours-table td + td { text-align: right; }
.hours-table tr.today td { color: var(--accent); font-weight: 700; }
.hours-table tr.off td + td { font-style: italic; }
@media (max-width: 699px) {
    /* En el móvil el bloque de datos va centrado y el horario ocupa el mismo ancho que el plano */
    .foot-info { align-items: center; text-align: center; }
    .foot-head { justify-content: center; }
    .hours-table { max-width: none; }
    .hours-table td:first-child { text-align: left; }
}
.map-card { display: block; border-radius: 18px; overflow: hidden; background: var(--bg-raise); text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.map-card:hover { color: var(--ink); border-color: var(--line-strong); }
.map { display: block; width: 100%; height: 220px; }
.map-card { display: flex; flex-direction: column; }
@media (min-width: 700px) {
    /* El plano ocupa todo el alto de la columna de datos, para que ambas queden cuadradas */
    .foot-grid { align-items: stretch; }
    .map { flex: 1 1 auto; height: auto; min-height: 240px; }
}
.map .st { stroke: var(--ink); stroke-opacity: .16; fill: none; stroke-linecap: round; }
.map .st.big { stroke-opacity: .28; }
.map .park { fill: var(--plant); fill-opacity: .22; }
.map .sea { fill: #6f9fb0; fill-opacity: .18; }
.map .plaza { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-opacity: .5; }
.map .pin { fill: var(--accent); }
.map .pin-dot { fill: var(--bg); }
.map text { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; }
.map text.soft { fill: var(--muted); font-weight: 600; font-size: 10px; letter-spacing: 1px; }
.map-cta { flex-shrink: 0; }
.map-cta { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 14px; font-weight: 700; font-size: 14px; }
.made { margin-top: 26px !important; font-family: var(--serif); font-style: italic; }
.wrap { position: relative; }
/* Botones de arriba a la derecha: llamar y modo claro / oscuro */
.top-actions { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; gap: 8px; }
.theme-fab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
    font-size: 13px; font-weight: 700;
}
.theme-fab:hover { border-color: var(--accent); color: var(--accent); }
.theme-fab .i-moon { display: none; }
:root[data-theme="light"] .theme-fab .i-sun { display: none; }
:root[data-theme="light"] .theme-fab .i-moon { display: inline; }
a.theme-fab { text-decoration: none; }
.call-fab { border-color: rgba(233, 180, 76, 0.6); color: var(--accent); }
.call-long { display: none; }
@media (min-width: 700px) {
    .top-actions { top: 28px; right: 4px; }
    .call-short { display: none; }
    .call-long { display: inline; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 20 · Modo claro: crema con letras verdes, como una carta de papel */
:root[data-theme="light"] {
    --bg: #f4eee1;
    --bg-raise: #ebe2cf;
    --ink: #1f2a26;
    --muted: #5d675f;
    --accent: #a8731a;
    --line: rgba(31, 42, 38, 0.16);
    --line-strong: rgba(31, 42, 38, 0.5);
    --red: #b8392a;
    --plant: #4f7a5c;
    color-scheme: light;
}
:root[data-theme="light"] a:hover { color: #000; }
:root[data-theme="light"] .icon-btn { border-color: rgba(31, 42, 38, 0.35); }
:root[data-theme="light"] .plants { color: #4f7a5c; }
:root[data-theme="light"] .plant { opacity: .22; }
:root[data-theme="light"] .plants::before { opacity: .09; filter: invert(1); }
:root[data-theme="light"] .plants::after { background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(120, 90, 40, 0.14) 100%); }
:root[data-theme="light"] .top { border-color: rgba(168, 115, 26, 0.5); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px rgba(168, 115, 26, 0.22); }
:root[data-theme="light"] .highlight { background: rgba(168, 115, 26, 0.1); border-color: rgba(168, 115, 26, 0.45); }
:root[data-theme="light"] .promo { --bg: #1f2a26; --accent: #e9b44c; box-shadow: 0 12px 28px rgba(60, 45, 20, 0.18); }
:root[data-theme="light"] .banner { color: #fff; }
:root[data-theme="light"] .field input, :root[data-theme="light"] .field select { border-color: rgba(31, 42, 38, 0.3); background: #fff; }
:root[data-theme="light"] .line { border-bottom-color: rgba(31, 42, 38, 0.12); }
:root[data-theme="light"] .preview { color: #3d4641; }
:root[data-theme="light"] .error { color: #b3261e; }
:root[data-theme="light"] .backdrop { background: rgba(31, 42, 38, 0.45); }
:root[data-theme="light"] .status:not(.is-closed) .dot { animation-name: latido-claro; }
@keyframes latido-claro {
    0% { box-shadow: 0 0 0 0 rgba(168, 115, 26, 0.5); }
    70% { box-shadow: 0 0 0 9px rgba(168, 115, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 115, 26, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .status .dot, .cart-bar.bump, .sheet:not([hidden]), .backdrop:not([hidden]) { animation: none !important; }
}

/* «IVA incluido» junto al total del pedido */
.total-row .iva { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }