/*
 * Alfogon template for Joomla 6 - child of Cassiopeia
 * Colours and look of the original alfogon.com (2010), responsive layout from Cassiopeia.
 */

:root {
    --af-green-1: #bedf50;
    --af-green-2: #9cc31a;
    --af-green-border: #94cd0b;
    --af-green-active: #e9fb84;
    --af-orange: #F15025;
    --af-btn: #D54215;          /* orange of the buttons: white text on it reads well (4.5:1) */
    --af-orange-dark: #A8300B;
    --af-blue: #2d5988;
    --af-maroon: #800000;
    --af-purple-bg: #f3e8ff;
    --af-purple: #8a4fbf;
    --af-text: #4a4a2e;
    --af-heading: #2d2d2d;
    --af-line: #cbcbcb;

    /* Cassiopeia variables */
    --cassiopeia-color-primary: #2d5988;   /* blue of the articles; each section sets its own colour below */
    --cassiopeia-color-link: #2d5988;
    --cassiopeia-color-hover: #1d3d60;
    --link-color: #2d5988;
    --link-color-rgb: 45, 89, 136;
    --link-hover-color: #1d3d60;
    --link-hover-color-rgb: 29, 61, 96;
    --cassiopeia-font-family-body: Arial, Helvetica, sans-serif;
    --cassiopeia-font-family-headings: Arial, Helvetica, sans-serif;
    --body-color: var(--af-text);
}

body.alfogon {
    color: var(--af-text);
    background: #fff;
}

a:hover { text-decoration: underline; }

/* ---------- Headings (orange titles of the old site) ---------- */
.alfogon h1, .alfogon .page-header h1 { color: var(--af-heading); font-weight: 400; }
.alfogon h2 { color: var(--af-heading); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.alfogon h3, .alfogon h4 { color: var(--af-orange); font-weight: 400; }

/* ---------- Header: white, logo left, search centre, login right ---------- */
.alfogon .container-header {
    background: #fff;
    background-image: none;
    color: var(--af-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.alfogon .af-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .5rem 1rem;
}
.alfogon .af-brand { margin: 0; padding: 0; }
.alfogon h1.af-brand { font-size: inherit; line-height: 1; font-weight: inherit; }
.alfogon .af-brand img { display: block; width: 220px; max-width: 100%; height: auto; }
.alfogon .af-search { flex: 1 1 20rem; max-width: 32rem; margin: 0; }
.alfogon .af-search .btn, .alfogon .af-search button {
    background: var(--af-btn);
    border-color: var(--af-btn);
    color: #fff;
}
.alfogon .af-search .btn:hover, .alfogon .af-search button:hover { background: #B8380F; }
.alfogon .af-login { margin-left: auto; font-size: .9rem; }
.alfogon .af-login .btn-primary {
    background: #fff; color: var(--af-blue); border: 1px solid var(--af-line);
}
.alfogon .container-header .site-description { color: var(--af-text); }

/* ---------- Main menu bar: sober and neutral (white, dark text, thin orange line for the active section) ---------- */
.alfogon .af-menubar {
    background: #fff;
    border-top: 1px solid #ece6db;
    border-bottom: 1px solid #ece6db;
    box-shadow: 0 2px 6px rgba(60, 45, 20, .04);
}
.alfogon .af-menubar .container-nav { padding: 0 1rem; }
.alfogon .container-header .af-menubar nav { margin-top: 0; }
.alfogon .af-menubar .mod-menu,
.alfogon .af-menubar .metismenu { margin: 0; }
.alfogon .container-header .af-menubar .metismenu > li,
.alfogon .container-header .af-menubar .mod-menu > li { position: relative; }
.alfogon .container-header .af-menubar .metismenu > li > a,
.alfogon .container-header .af-menubar .metismenu > li > button,
.alfogon .container-header .af-menubar .mod-menu > li > a,
.alfogon .container-header .af-menubar .mod-menu > li > span {
    color: #3a352c;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    text-shadow: none;
    padding: .85rem 1.1rem;
    transition: color .15s;
}
.alfogon .container-header .af-menubar .metismenu > li > a:after,
.alfogon .container-header .af-menubar .metismenu > li > button:before { display: none; }
/* The line under the hovered / active section */
.alfogon .container-header .af-menubar .metismenu > li,
.alfogon .container-header .af-menubar .mod-menu > li { transition: box-shadow .15s; }
.alfogon .container-header .af-menubar .metismenu > li:hover,
.alfogon .container-header .af-menubar .metismenu > li.active,
.alfogon .container-header .af-menubar .mod-menu > li.active { box-shadow: inset 0 -3px 0 var(--af-orange); }
.alfogon .container-header .af-menubar .metismenu > li:hover > a,
.alfogon .container-header .af-menubar .metismenu > li:hover > button,
.alfogon .container-header .af-menubar .metismenu > li.active > a,
.alfogon .container-header .af-menubar .metismenu > li.active > button,
.alfogon .container-header .af-menubar .mod-menu > li.active > a { color: #C23A10; background: none; text-decoration: none; }
.alfogon .container-header .af-menubar .metismenu > li > a,
.alfogon .container-header .af-menubar .mod-menu > li > a { text-decoration: none; }
.alfogon .container-header .af-menubar .metismenu > li > button { padding-left: .1rem; padding-right: .9rem; color: #8a8175; }
.alfogon .container-header .af-menubar .metismenu > li,
.alfogon .container-header .af-menubar .metismenu > li.active,
.alfogon .container-header .af-menubar .mod-menu > li.active { background: none; }
.alfogon .container-header .af-menubar .metismenu > li > a:hover { text-decoration: none; }
.alfogon .container-header .metismenu .mm-collapse,
.alfogon .container-header .metismenu .mm-collapsing {
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 18px rgba(60, 45, 20, .12);
}
.alfogon .container-header .metismenu .mm-collapse a,
.alfogon .container-header .metismenu .mm-collapsing a { color: #3a352c; text-shadow: none; }
.alfogon .container-header .metismenu .mm-collapse a:hover { color: #C23A10; background: #fbf8ec; text-decoration: none; }
.alfogon .container-header .navbar-toggler {
    color: #3a352c;
    border-color: #ddd3c2;
    border-radius: 8px;
    margin: .45rem 0;
}

/* ---------- Breadcrumbs ---------- */
.alfogon .mod-breadcrumbs__wrapper .breadcrumb,
.alfogon .breadcrumb {
    background: transparent;
    padding: .5rem 0;
    font-size: .85rem;
    color: #666;
}
.alfogon .breadcrumb a { font-weight: 700; text-decoration: none; }
.alfogon .breadcrumb a:hover { text-decoration: underline; }

/* ---------- Home page buttons: Recetas / Vinos / Restaurantes ---------- */
.af-homebuttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.af-homebutton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 7rem;
    padding: 1rem;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
    transition: filter .15s, transform .15s;
}
.af-homebutton:hover, .af-homebutton:focus { color: #fff; text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); }
.af-homebutton__title { font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.af-homebutton__sub { font-size: .85rem; font-weight: 700; margin-top: .4rem; opacity: .95; }
.af-homebutton--recipes     { background: linear-gradient(160deg, #F4693D 0%, #D54215 100%); border-bottom: 1px solid #A8300B; text-shadow: 0 1px 2px rgba(110, 30, 5, .45); }
.af-homebutton--wines       { background: linear-gradient(160deg, #b8285a 0%, #8c1841 100%); border-bottom: 1px solid #66102f; text-shadow: 0 1px 2px rgba(60, 5, 25, .45); }
.af-homebutton--restaurants { background: linear-gradient(160deg, #7cb342 0%, #5a8f2a 100%); border-bottom: 1px solid #44701e; text-shadow: 0 1px 2px rgba(30, 55, 10, .45); }
.af-homebutton--ads         { background: linear-gradient(160deg, #1aa3ad 0%, #0f7b83 100%); border-bottom: 1px solid #0a5a60; text-shadow: 0 1px 2px rgba(5, 45, 50, .45); }
/* Four buttons: one line from tablets up, 2 x 2 on phones */
@media (min-width: 768px) { .af-homebuttons--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1199.98px) { .af-homebuttons--n4 .af-homebutton__title { font-size: 1.55rem; } }
@media (max-width: 767.98px) { .af-homebuttons--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .af-homebuttons--n4 .af-homebutton__title { font-size: 1.3rem; } }

/* ---------- Modules (cards) like the old boxes ---------- */
.alfogon .card {
    border: 1px solid var(--af-line);
    border-radius: 6px;
}
.alfogon .card-header {
    background: transparent;
    color: var(--af-purple);
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 1px solid var(--af-line);
}
.alfogon .container-sidebar-right {
    background: var(--af-purple-bg);
    border-radius: 6px;
    padding: .75rem;
    align-self: start;
}
.alfogon .container-sidebar-right .sidebar-right:first-child { margin-top: 0; }
.alfogon .container-sidebar-left .card-header {
    color: #666;
    background: linear-gradient(to bottom, #f9f9f0, #ececdc);
    font-size: 1rem;
}

/* ---------- Buttons ---------- */
.alfogon .btn-primary {
    --btn-bg: var(--af-btn);
    --btn-border-color: var(--af-btn);
    --btn-hover-bg: #B8380F;
    --btn-hover-border-color: #9E300C;
    --btn-active-bg: #9E300C;
    background-color: var(--btn-bg);
    border-color: var(--btn-border-color);
}

/* ---------- Footer ---------- */
.alfogon .af-footer {
    background: #faf8f3;
    color: #666;
    border-top: 1px solid #ece6db;
    margin-top: 2rem;
}
.alfogon .af-footer .grid-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem .5rem;
}
.alfogon .af-footer__brand { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.alfogon .af-footer a { color: var(--af-blue); }
.alfogon .af-footer .mod-menu { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }

/* ---------- JCookBook in the Alfogon colours ---------- */
.alfogon .com-jcookbook { --jcb-accent: #C23A10; --jcb-soft: #f9f6e8; --jcb-line: #e2dcc0; }
.alfogon .jcb-howto h2, .alfogon .jcb-ingredients h2, .alfogon .jcb-reviews h2, .alfogon .jcb-related h2 { color: var(--af-orange); font-family: Arial, Helvetica, sans-serif; }

/* ---------- Mobile menu (hamburger) ---------- */
@media (max-width: 991.98px) {
    .alfogon .af-menubar .container-nav > nav,
    .alfogon .af-menubar .navbar-collapse,
    .alfogon .af-menubar .metismenu,
    .alfogon .af-menubar .metismenu > li { width: 100%; flex: 1 1 100%; }
    .alfogon .af-menubar .metismenu > li { border-top: 1px solid rgba(255, 255, 255, .45); }
    .alfogon .container-header .metismenu .mm-collapse { box-shadow: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 767.98px) {
    .alfogon .af-header { justify-content: center; }
    .alfogon .af-search { order: 3; flex-basis: 100%; max-width: none; }
    .alfogon .af-login { margin-left: 0; }
    .af-homebutton { min-height: 5rem; }
    .af-homebutton__title { font-size: 1.5rem; }
    .alfogon .container-sidebar-right { padding: .5rem; }
}

/* ------------------------------------------------------------------ Sub-menu (position "subnav"): large buttons in neutral greys,
   the same in every section (recipes, wines, articles…), easy to read and to tap on a tablet */
.alfogon {
    --af-sub-panel: #f5f5f3; --af-sub-panel-line: #e4e3df;
    --af-sub-bg: #fff; --af-sub-line: #d9d7d2; --af-sub-text: #3d3c39;
    --af-sub-hover-bg: #eeedea; --af-sub-hover-line: #b8b5ae;
    --af-sub-active-bg: #2d5988; --af-sub-active-text: #fff;
}
.alfogon .af-subnav {
    margin: .75rem 0 1.5rem; padding: .75rem;
    background: var(--af-sub-panel); border: 1px solid var(--af-sub-panel-line); border-radius: 12px;
}
.alfogon .af-subnav ul,
.alfogon .af-subnav .mod-menu {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); grid-auto-rows: 1fr; gap: .5rem;
    list-style: none; margin: 0; padding: 0; flex-direction: initial;
}
.alfogon .af-subnav li { display: block; margin: 0; padding: 0; width: auto; }
.alfogon .af-subnav li ul { display: none; }
.alfogon .af-subnav a,
.alfogon .af-subnav .mod-menu__heading,
.alfogon .af-subnav .mod-menu__separator {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 3rem; padding: .5rem .75rem; height: 100%;
    background: var(--af-sub-bg); color: var(--af-sub-text); font-size: 1.05rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; border: 1px solid var(--af-sub-line); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .15s, border-color .15s, color .15s;
}
.alfogon .af-subnav a:hover,
.alfogon .af-subnav a:focus-visible { text-decoration: none; background: var(--af-sub-hover-bg); border-color: var(--af-sub-hover-line); color: #1f1f1d; }
.alfogon .af-subnav a:focus-visible { outline: 3px solid rgba(45, 89, 136, .35); outline-offset: 1px; }
.alfogon .af-subnav li.current > a,
.alfogon .af-subnav li.active > a,
.alfogon .af-subnav li.current > a:hover,
.alfogon .af-subnav li.current > a:focus {
    background: var(--af-sub-active-bg); border-color: var(--af-sub-active-bg); color: var(--af-sub-active-text); text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}
.alfogon .af-subnav a img { margin-right: .4rem; }
@media (max-width: 575.98px) {
    .alfogon .af-subnav { padding: .5rem; }
    .alfogon .af-subnav ul, .alfogon .af-subnav .mod-menu { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .alfogon .af-subnav a { font-size: 1rem; min-height: 2.75rem; }
}

/* ------------------------------------------------------------------ Links: no underline (Cassiopeia underlines every link), underline on hover only */
body.alfogon a:not([class]) { text-decoration: none; }
body.alfogon a:not([class]):hover,
body.alfogon a:not([class]):focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.alfogon .container-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(241, 80, 37, .3); outline: 0; border-color: var(--af-orange); }

/* ------------------------------------------------------------------ Footer menu (legal pages): one discreet line */
.alfogon .af-footer .af-footmenu,
.alfogon .af-footer .mod-menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; flex-direction: row; }
.alfogon .af-footer .mod-menu li { margin: 0; padding: 0; }
.alfogon .af-footer .mod-menu a { color: #6b665c; font-size: .875rem; text-decoration: none; }
.alfogon .af-footer .mod-menu a:hover, .alfogon .af-footer .mod-menu a:focus-visible { color: #3a352c; text-decoration: underline; }

/* ------------------------------------------------------------------ Articles (Actualidad, Guías) */
.alfogon .com-content-article__body img, .alfogon .com-content-category-blog img { max-width: 100%; height: auto; }
.alfogon .com-content-article__body img[align="left"], .alfogon .com-content-article__body img[style*="float: left"] { margin: 0 1rem .5rem 0; }
.alfogon .com-content-article__body img[align="right"], .alfogon .com-content-article__body img[style*="float: right"] { margin: 0 0 .5rem 1rem; }
.alfogon .blog-item .item-content { padding: 1rem 1.25rem; }
.alfogon .readmore .btn { background: #fff; color: var(--af-sub-text, #3d3c39); border: 1px solid var(--af-sub-line, #d9d7d2); }
.alfogon .readmore .btn:hover { background: var(--af-sub-hover-bg, #eeedea); }
.alfogon .boxed .blog-item, .alfogon .blog-items.boxed .blog-item { border-top-color: var(--af-sub-hover-line, #b8b5ae); }

/* ------------------------------------------------------------------ Header: logo | search (with its section) | personal menu */
.alfogon .af-header { flex-wrap: nowrap; justify-content: space-between; gap: .75rem 1.5rem; padding: .6rem 1rem; }
.alfogon .af-qsearch {
    flex: 1 1 auto; max-width: 40rem; display: flex; align-items: stretch;
    border: 1px solid #d9d7d2; border-radius: 12px; background: #fff; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.alfogon .af-qsearch:focus-within { border-color: #2d5988; box-shadow: 0 0 0 .2rem rgba(45, 89, 136, .15); }
.alfogon .af-qsearch__section {
    flex: none; border: 0; border-right: 1px solid #e4e3df; background: #f5f5f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237a7468' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center;
    color: #3d3c39; font-weight: 600; font-size: .95rem; padding: 0 2rem 0 .9rem; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.alfogon .af-qsearch__section:focus-visible { outline: 2px solid #2d5988; outline-offset: -2px; }
.alfogon .af-qsearch__q { flex: 1 1 auto; min-width: 0; border: 0; padding: .6rem .9rem; font-size: 1rem; color: #3d3c39; background: transparent; }
.alfogon .af-qsearch__q:focus { outline: 0; }
.alfogon .af-qsearch__go {
    flex: none; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--af-btn); margin: -1px -1px -1px 0; padding: 0 1.1rem;
    background: var(--af-btn); color: #fff; font-weight: 700; cursor: pointer;
}
.alfogon .af-qsearch__go:hover, .alfogon .af-qsearch__go:focus-visible { background: #B8380F; border-color: #B8380F; }

.alfogon .af-user { flex: none; position: relative; }
.alfogon .af-user__menu > summary { list-style: none; }
.alfogon .af-user__menu > summary::-webkit-details-marker { display: none; }
.alfogon .af-user__button {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; white-space: nowrap;
    padding: .55rem 1rem; border: 1px solid #d9d7d2; border-radius: 12px; background: #fff; color: #3d3c39; font-weight: 700;
}
.alfogon .af-user__button:hover, .alfogon .af-user__menu[open] > .af-user__button { background: #f5f5f3; border-color: #b8b5ae; }
.alfogon .af-user__button::after { content: ""; width: .5rem; height: .5rem; border: solid #7a7468; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); margin-left: .15rem; }
.alfogon .af-user__button--in { padding: .35rem .9rem .35rem .4rem; }
.alfogon .af-user__avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
    background: #2d5988; color: #fff; font-weight: 700; font-size: .95rem;
}
.alfogon .af-user__name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.alfogon .af-user__panel {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 1050; width: 17rem; padding: 1rem;
    background: #fff; border: 1px solid #e4e3df; border-radius: 12px; box-shadow: 0 10px 28px rgba(40, 30, 10, .16);
}
.alfogon .af-login-form { display: grid; gap: .35rem; }
.alfogon .af-login-form label { font-size: .85rem; font-weight: 600; color: #5d5a54; }
.alfogon .af-login-form input[type=text], .alfogon .af-login-form input[type=password] {
    border: 1px solid #d9d7d2; border-radius: 10px; padding: .5rem .7rem; font-size: 1rem; margin-bottom: .3rem;
}
.alfogon .af-login-form input:focus { outline: 0; border-color: #2d5988; box-shadow: 0 0 0 .2rem rgba(45, 89, 136, .15); }
.alfogon .af-login-form__remember { display: flex; align-items: center; gap: .4rem; font-weight: 400 !important; }
.alfogon .af-login-form__submit {
    margin-top: .35rem; border: 0; border-radius: 10px; padding: .6rem; background: var(--af-btn); color: #fff; font-weight: 700; cursor: pointer;
}
.alfogon .af-login-form__submit:hover { background: #B8380F; }
.alfogon .af-user__links { list-style: none; margin: .75rem 0 0; padding: 0; }
.alfogon .af-user__links li a { display: block; padding: .45rem .5rem; border-radius: 8px; color: #3d3c39; text-decoration: none; }
.alfogon .af-user__links li a:hover { background: #f5f5f3; color: #2d5988; }
.alfogon .af-user__panel .af-user__links:first-child { margin-top: 0; }
.alfogon .af-user__logout {
    width: 100%; margin-top: .5rem; padding: .5rem; border: 1px solid #d9d7d2; border-radius: 10px; background: #fff; color: #3d3c39; font-weight: 600; cursor: pointer;
}
.alfogon .af-user__logout:hover { background: #f5f5f3; }

@media (max-width: 767.98px) {
    .alfogon .af-header { flex-wrap: wrap; justify-content: space-between; }
    .alfogon .af-brand img { width: 160px; }
    .alfogon .af-qsearch { order: 3; flex-basis: 100%; max-width: none; }
    .alfogon .af-qsearch__go-text { display: none; }
    .alfogon .af-qsearch__section { font-size: .9rem; padding-left: .6rem; }
    .alfogon .af-user__name { display: none; }
}

/* ------------------------------------------------------------------ Home page (includes/portada.php) */
.alfogon {
    --af-c-recipes: #F15025; --af-c-recipes-soft: #FEEEE8;
    --af-c-news: #2d5988;    --af-c-news-soft: #eaf0f6;
    --af-c-guides: #2d5988;  --af-c-guides-soft: #eaf0f6;   /* guides are articles: same blue */
    --af-c-wines: #9c2150;   --af-c-wines-soft: #f9ecf1;
    --af-c-stats: #7a7468;   --af-c-stats-soft: #f5f5f3;
}
.af-home { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; margin-top: .5rem; }
.af-home__main { display: grid; gap: 1.5rem; min-width: 0; }
.af-home > *, .af-box { min-width: 0; }
.af-home__side { display: grid; gap: 1.5rem; }
.af-home__row--top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.af-home__stack { display: grid; gap: 1.5rem; grid-auto-rows: 1fr; }
.af-home__stack .af-box { display: flex; flex-direction: column; }
.af-home__stack .af-teaser__more { margin-top: auto; padding-top: .7rem; align-self: flex-start; }

/* Boxes: white card, coloured top line and soft tinted header, as the coloured boxes of the original */
.af-box {
    --c: var(--af-c-stats); --soft: var(--af-c-stats-soft);
    position: relative; background: #fff; border: 1px solid #e4e3df; border-top: 4px solid var(--c); border-radius: 14px;
    padding: 1rem 1.15rem 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    background-image: linear-gradient(to bottom, var(--soft), #fff 4.5rem);
}
.af-box--recipes { --c: var(--af-c-recipes); --soft: var(--af-c-recipes-soft); }
.af-box--news    { --c: var(--af-c-news);    --soft: var(--af-c-news-soft); }
.af-box--guides  { --c: var(--af-c-guides);  --soft: var(--af-c-guides-soft); }
.af-box--wines   { --c: var(--af-c-wines);   --soft: var(--af-c-wines-soft); }
.alfogon .af-box__title {
    margin: 0 0 .75rem; font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--c);
}
.alfogon .af-box__title a { color: inherit; text-decoration: none; }
.alfogon .af-box__more { display: inline-block; margin-top: .6rem; font-size: .9rem; font-weight: 600; color: var(--c); text-decoration: none; }
.alfogon .af-box__more:hover { text-decoration: underline; }

/* Latest photos: big picture, arrows, strip of thumbnails */
.af-photos__stage { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #f5f5f3; }
.af-photos__slide { position: absolute; inset: 0; display: block; }
.af-photos__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-photos__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .7rem; color: #fff; font-weight: 700; font-size: 1.05rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.alfogon .af-photos__slide:hover .af-photos__caption { text-decoration: underline; }
.af-photos__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .88); color: #3d3c39; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.af-photos__nav:hover, .af-photos__nav:focus-visible { background: #fff; color: var(--af-c-recipes); }
.af-photos__nav--prev { left: .6rem; } .af-photos__nav--next { right: .6rem; }
.af-photos__thumbs { display: flex; justify-content: safe center; gap: .45rem; margin-top: .6rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: .2rem; scrollbar-width: thin; }
.af-photos__thumb { flex: 0 0 4.4rem; height: 3.3rem; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .7; }
.af-photos__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-photos__thumb:hover, .af-photos__thumb.is-active { opacity: 1; border-color: var(--af-c-recipes); }

/* Teasers of Actualidad and Guías */
.alfogon .af-teaser__title { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; line-height: 1.25; margin: 0 0 .6rem; }
.alfogon .af-teaser__title a { color: #2d2d2d; text-decoration: none; }
.alfogon .af-teaser__title a:hover { color: var(--c); }
.af-teaser__body { display: flex; gap: .85rem; align-items: flex-start; }
.af-teaser__img { flex: 0 0 6.5rem; }
.af-teaser__img img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 8px; display: block; }
.af-teaser__body p { margin: 0; font-size: .95rem; line-height: 1.5; color: #4a4a40; }
.alfogon .af-teaser__more { display: inline-block; margin-top: .7rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.alfogon .af-teaser__more:hover { text-decoration: underline; }

/* Banners: photo + real text (sharp on every screen) */
.af-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.alfogon .af-banner {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; padding: 1.1rem 1.25rem;
    border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background-size: cover; background-position: center;
    isolation: isolate; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: transform .2s, box-shadow .2s;
}
.af-banner--themes { background-color: #b5560a; background-image: url("../images/home/temas.jpg"); }
.af-banner--wines { background-color: #7a1638; background-image: url("../images/home/bodegas.svg"); background-position: center bottom; }
.af-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .2s; }
.af-banner--themes::before { background: linear-gradient(to top, rgba(40, 14, 0, .96) 0%, rgba(70, 24, 0, .82) 34%, rgba(40, 14, 0, .45) 68%, rgba(0, 0, 0, .25) 100%); }
.af-banner--wines::before  { background: linear-gradient(to top, rgba(80, 10, 40, .85) 0%, rgba(80, 10, 40, .45) 35%, rgba(0, 0, 0, 0) 62%); }
.alfogon .af-banner:hover, .alfogon .af-banner:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); text-decoration: none; }
.af-banner__kicker { font-size: .95rem; opacity: .95; }
.af-banner__title { font-family: Georgia, "Times New Roman", serif; font-size: 1.85rem; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.af-banner__kicker, .af-banner__sub { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.af-banner__sub { margin-top: .35rem; font-size: .9rem; font-weight: 600; opacity: .95; }

/* New wines: bottles in a row */
.af-newwines__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; }
.af-newwines__list a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem .25rem; border-radius: 10px; text-decoration: none; color: #4a4a40; }
.af-newwines__list a:hover { background: var(--af-c-wines-soft); }
.af-newwines__list img { height: 7.5rem; width: 100%; object-fit: contain; }
.af-newwines__list span { font-size: .75rem; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-newwines .af-box__more { position: absolute; top: .9rem; right: 1.15rem; margin: 0; }

/* Side: latest recipes and figures */
.af-latest__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.af-latest__grid a { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.af-latest__grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.af-latest__grid a:hover img { transform: scale(1.06); }
/* Recipe without a photo: the drawn picture, on a soft background */
.af-m__img--placeholder { background: var(--af-c-recipes-soft, #fdf0e6); }
.af-m__img--placeholder img, .af-m--grid .af-m__img--placeholder img { object-fit: cover; }
.af-stats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.af-stats__list li { padding: .35rem 0; border-bottom: 1px dashed #e4e3df; color: #4a4a40; }
.af-stats__list li:last-child { border-bottom: 0; }
.af-stats__list strong { display: inline-block; min-width: 3.2rem; color: #2d2d2d; font-size: 1.05rem; }
.alfogon .af-stats__list a { color: inherit; text-decoration: none; }
.alfogon .af-stats__list a:hover strong { color: var(--af-c-news); }

@media (max-width: 1199.98px) { .af-home { grid-template-columns: minmax(0, 1fr); } .af-home__side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } }
@media (max-width: 991.98px) {
    .af-home__row--top { grid-template-columns: minmax(0, 1fr); }
    /* auto-fit: a position with a single module (e.g. the photo carousel) takes the whole width */
    .af-home__stack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); grid-auto-rows: auto; }
    .af-newwines__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .af-home__stack, .af-banners, .af-home__side { grid-template-columns: minmax(0, 1fr); }
    .af-banner__title { font-size: 1.5rem; }
    .af-newwines .af-box__more { position: static; }
}
@media (prefers-reduced-motion: reduce) { .alfogon .af-banner, .af-latest__grid img { transition: none; } }

/* ------------------------------------------------------------------ Modules of the site (pkg_alfogon_modules), chrome "afbox" */
.alfogon { --af-c-restaurants: #4f8a2b; --af-c-restaurants-soft: #eef6e6; --af-c-plain: #7a7468; --af-c-plain-soft: #f7f6f3; }
.af-box--restaurants { --c: var(--af-c-restaurants); --soft: var(--af-c-restaurants-soft); }
.af-box--stats       { --c: var(--af-c-stats);       --soft: var(--af-c-stats-soft); }
.af-box--plain       { --c: var(--af-c-plain);       --soft: var(--af-c-plain-soft); }
.af-mod + .af-mod { margin-top: 1.25rem; }
.af-home .af-mod + .af-mod { margin-top: 0; }
.alfogon .container-sidebar-right .af-mod, .alfogon .container-sidebar-left .af-mod { margin-bottom: 1.25rem; }
.af-m-intro, .af-m-message { margin: 0 0 .7rem; font-size: .92rem; color: #5a574f; }
.af-m-message a { font-weight: 600; }

/* Lists of recipes, wines and restaurants */
.af-m { list-style: none; margin: 0; padding: 0; }
.alfogon .af-m__link { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: #3d3c39; border-radius: 10px; }
.af-m__img { flex: 0 0 auto; display: block; overflow: hidden; border-radius: 8px; background: #f5f5f3; }
.af-m__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.af-m__img--none { background: var(--soft, #f5f5f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a6' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 4 0V3M8 10v11M17 21V3c-2 1.5-3 4-3 7h3'/%3E%3C/svg%3E") center / 40% no-repeat; }
.af-m__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.af-m__title { font-weight: 700; line-height: 1.25; color: #2d2d2d; }
.alfogon .af-m__link:hover .af-m__title, .alfogon .af-m__link:focus-visible .af-m__title { color: var(--c, #2d5988); text-decoration: underline; text-underline-offset: .15em; }
.af-m__link:hover .af-m__img img { transform: scale(1.05); }
.af-m__sub { font-size: .8rem; color: #7a7468; }
.af-m__text { font-size: .85rem; line-height: 1.4; color: #5a574f; }
.af-m__extra { line-height: 1; }
/* list */
.af-m--list .af-m__item + .af-m__item { border-top: 1px dashed #e4e3df; }
.af-m--list .af-m__link { padding: .45rem 0; }
.af-m--list .af-m__img { width: 3.6rem; height: 3.6rem; }
/* grid of pictures */
.af-m--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.af-m--grid .af-m__img { width: 100%; aspect-ratio: 1; }
/* row (bottles) */
.af-m--row { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.af-m--row .af-m__link { flex-direction: column; text-align: center; padding: .5rem .25rem; gap: .35rem; }
.af-m--row .af-m__link:hover { background: var(--soft, #f7f6f3); }
.af-m--row .af-m__img { width: 100%; height: 7.5rem; background: none; }
.af-m--row .af-m__img img { object-fit: contain; }
/* the row of pictures removes the background of the boxes: the placeholder icon is put back */
.af-m--row .af-m__img.af-m__img--none, .af-box .af-m--row .af-m__img.af-m__img--none { background: var(--soft, #f5f5f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2a6' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 4 0V3M8 10v11M17 21V3c-2 1.5-3 4-3 7h3'/%3E%3C/svg%3E") center / 40% no-repeat; background-size: auto 45%; border-radius: 8px; }
.af-m--row .af-m__title { font-weight: 400; font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-m--row .af-m__sub { display: none; }
/* big card (sponsored restaurant) */
.af-m--card { display: grid; gap: 1rem; }
.af-m--card .af-m__link { flex-direction: column; align-items: stretch; gap: .5rem; }
.af-m--card .af-m__img { width: 100%; aspect-ratio: 4 / 3; }
.af-m--card .af-m__title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.25rem; }
.af-box .af-box__more { margin-top: .7rem; }
.af-box .af-m + .af-box__more, .af-box .af-mtree + .af-box__more { display: inline-block; }
/* The "new wines" box of the home page: link at the top right */
.af-home__d .mod_latestwines { position: relative; }
.af-home__d .mod_latestwines .af-box__more { position: absolute; top: .9rem; right: 1.15rem; margin: 0; }

/* Links with a figure (timings) and menus (dishes, varieties, types) */
.af-mlinks, .af-mtree { list-style: none; margin: 0; padding: 0; }
.alfogon .af-mlinks a, .alfogon .af-mtree a { display: flex; align-items: center; gap: .55rem; padding: .42rem .5rem; border-radius: 8px; color: #3d3c39; text-decoration: none; }
.alfogon .af-mlinks a:hover, .alfogon .af-mtree a:hover { background: var(--soft, #f7f6f3); color: var(--c, #2d5988); }
.af-mlinks a > span:first-of-type, .af-mtree a > span:first-child { flex: 1 1 auto; }
.af-mlinks__ico { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: var(--c, #7a7468); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af-mlinks__n { flex: 0 0 auto; min-width: 1.8rem; padding: .05rem .45rem; border-radius: 999px; background: var(--soft, #f2f1ee); color: var(--c, #5a574f); font-size: .75rem; font-weight: 700; text-align: center; }
.af-mtree--1 > li > a { font-weight: 700; }
.af-mtree--2 { margin: 0 0 .3rem .9rem; border-left: 2px solid var(--soft, #eee); padding-left: .2rem; }
.af-mtree--2 a { font-size: .92rem; padding-top: .3rem; padding-bottom: .3rem; }

/* Map */
.af-mmap .jp-map { width: 100%; border-radius: 10px; overflow: hidden; }

/* Articles module, layout "teaser" (Actualidad, Guías) */
.af-teaser__others { list-style: none; margin: .7rem 0 0; padding: .6rem 0 0; border-top: 1px dashed #e4e3df; font-size: .9rem; }
.af-teaser__others li { padding: .15rem 0; }
.alfogon .af-teaser__others a { color: #3d3c39; text-decoration: none; }
.alfogon .af-teaser__others a:hover { color: var(--c); text-decoration: underline; }
.af-home__b .af-box:only-child { height: 100%; }
.alfogon .container-sidebar-right { background: none; padding: 0; }
/* Stars of the restaurant modules */
.af-m .jp-stars { position: relative; display: inline-block; width: 5.2em; height: 1em; vertical-align: -.1em; font-size: .8rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 6 6.4.8-4.7 4.4 1.2 6.4L12 17.3l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' fill='%23e4e1da'/%3E%3C/svg%3E") left center / 1.04em 1em repeat-x; }
.af-m .jp-stars__on { position: absolute; inset: 0 auto 0 0; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 6 6.4.8-4.7 4.4 1.2 6.4L12 17.3l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' fill='%23f2a007'/%3E%3C/svg%3E") left center / 1.04em 1em repeat-x; }
/* Rows of photos (recipes, restaurants): the photo fills its frame; bottles keep their shape */
.af-box--recipes .af-m--row .af-m__img, .af-box--restaurants .af-m--row .af-m__img { height: 6.5rem; border-radius: 8px; }
.af-box--recipes .af-m--row .af-m__img img, .af-box--restaurants .af-m--row .af-m__img img { object-fit: cover; }
/* Logo (SVG, with the fruit of the month) */
.alfogon .af-brand img[src$=".svg"] { width: 226px; }
@media (max-width: 767.98px) { .alfogon .af-brand img[src$=".svg"] { width: 180px; } }
@media (max-width: 575.98px) { .alfogon .af-brand img[src$=".svg"] { width: 160px; } }

/* ======================================================================================================
   Header 2026, as on marmiton.org: a bar fixed at the top (menu button | logo | search | login),
   the main menu in a side panel opening from the left (Bootstrap offcanvas), with its sub-menus.
   On phones the search becomes a magnifier that opens it under the bar.
   ====================================================================================================== */
html { scroll-padding-top: calc(var(--af-top, 4.5rem) + .75rem); }
.alfogon .container-header.af-top {
    position: sticky !important; top: 0; z-index: 1030;   /* Cassiopeia forces "relative" on tablets and phones */
    background: #fff; background-image: none; color: var(--af-text);
    box-shadow: none; border-bottom: 1px solid #ece9e4;
    transition: box-shadow .2s ease;
}
.alfogon .container-header.af-top.is-scrolled { box-shadow: 0 2px 12px rgba(40, 30, 20, .12); border-bottom-color: transparent; }
.alfogon .af-top__bar {
    display: flex; align-items: center; gap: 1rem;
    width: 100%; max-width: 1320px; margin: 0 auto; padding: .55rem 1rem; min-height: 68px;
}
.alfogon .af-top__burger {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; margin-left: -.5rem;
    border: 0; border-radius: 10px; background: transparent; color: #4a4744; cursor: pointer;
}
.alfogon .af-top__burger:hover { background: #f5f3f0; }
.alfogon .af-top__burger:focus-visible { outline: 2px solid #2d5988; outline-offset: 2px; }
.alfogon .af-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 30px; }
.alfogon .af-burger span { display: block; height: 3px; border-radius: 2px; background: currentColor; }
.alfogon .af-top .af-brand { flex: none; margin: 0; padding: 0; }
.alfogon .af-top .af-brand img { display: block; width: 177px; max-width: none; height: auto; }
.alfogon .af-top .af-brand img[src$=".svg"] { width: 177px; }
.alfogon .af-top .af-qsearch { flex: 1 1 auto; max-width: 40rem; margin: 0 auto; }
.alfogon .af-top__actions { flex: none; display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.alfogon .af-top .af-qsearch + .af-top__actions { margin-left: 0; }
.alfogon .af-top__searchbtn {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: #2f2c27; font-size: 1.2rem; cursor: pointer;
}
.alfogon .af-top__searchbtn:hover, .alfogon .af-top.is-searching .af-top__searchbtn { background: #f5f3f0; }
.alfogon .af-top__searchbtn:focus-visible { outline: 2px solid #2d5988; outline-offset: 2px; }

/* Side panel with the menu */
.alfogon .af-nav { --bs-offcanvas-width: min(360px, 88vw); border-right: 0; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
.alfogon .af-nav__head { min-height: 68px; padding: .55rem 1rem; border-bottom: 1px solid #ece9e4; }
.alfogon .af-nav__logo img { display: block; width: 150px; height: auto; }
.alfogon .af-nav__close { margin-left: auto; padding: .75rem; }
.alfogon .af-nav__body { padding: .5rem .5rem 2rem; }
.alfogon .af-nav__body nav { margin: 0; }
.alfogon .af-navlist { list-style: none; margin: 0; padding: 0; }
.alfogon .af-navlist__item--d1 { border-bottom: 1px solid #f1eee9; }
.alfogon .af-navlist__row { display: flex; align-items: center; }
.alfogon .af-navlist__link {
    flex: 1 1 auto; display: flex; align-items: center; gap: .6rem; min-height: 48px;
    padding: .6rem .8rem; border: 0; border-radius: 10px; background: none; text-align: left;
    color: #2f2c27; font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.alfogon a.af-navlist__link:hover, .alfogon button.af-navlist__link:hover { background: #fef0ea; color: #C23A10; text-decoration: none; }
.alfogon .af-navlist__item.is-current > .af-navlist__row > .af-navlist__link,
.alfogon .af-navlist__item.is-open > .af-navlist__row > .af-navlist__link { color: #C23A10; }
.alfogon .af-navlist__toggle {
    flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: none; color: #6b655c; cursor: pointer;
}
.alfogon .af-navlist__toggle:hover { background: #f5f3f0; color: #C23A10; }
.alfogon .af-navlist__toggle:focus-visible, .alfogon .af-navlist__link:focus-visible { outline: 2px solid #2d5988; outline-offset: -2px; }
.alfogon .af-navlist__chevron { width: 10px; height: 10px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.alfogon .af-navlist__toggle:not(.collapsed) .af-navlist__chevron { transform: translateY(2px) rotate(-135deg); }
.alfogon .af-navlist__sub { list-style: none; margin: 0; padding: 0 0 .5rem .75rem; }
.alfogon .af-navlist__sub .af-navlist__link { min-height: 42px; padding: .45rem .8rem; font-size: .98rem; font-weight: 500; color: #4d473f; }
.alfogon .af-navlist__sub .af-navlist__item.is-current > .af-navlist__row > .af-navlist__link { color: #C23A10; font-weight: 700; background: #fef0ea; }
.alfogon .af-nav__mine { margin-top: 1.25rem; padding-top: .75rem; border-top: 2px solid #f1eee9; }
.alfogon .af-nav__label { margin: 0 .8rem .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a7468; }
.alfogon .af-navlist--mine .af-navlist__item--d1, .alfogon .af-nav__mine .af-navlist__item--d1 { border-bottom: 0; }
.alfogon .af-navlist--mine .af-navlist__link, .alfogon .af-nav__mine .af-navlist__item--d1 > .af-navlist__row > .af-navlist__link { min-height: 42px; font-size: .98rem; font-weight: 500; }

/* Tablets */
@media (max-width: 991.98px) {
    .alfogon .af-top__bar { gap: .75rem; }
    .alfogon .af-top .af-brand img, .alfogon .af-top .af-brand img[src$=".svg"] { width: 150px; }
    .alfogon .af-top .af-qsearch__go-text { display: none; }
}
/* Phones: the magnifier opens the search under the bar */
@media (max-width: 767.98px) {
    .alfogon .af-top__bar { flex-wrap: nowrap; gap: .4rem; min-height: 58px; padding: .4rem .75rem; }
    .alfogon .af-top .af-brand img, .alfogon .af-top .af-brand img[src$=".svg"] { width: 132px; }
    .alfogon .af-top__searchbtn { display: inline-flex; }
    .alfogon .af-top .af-qsearch + .af-top__actions { margin-left: auto; }
    .alfogon .af-top .af-qsearch {
        display: none; position: absolute; left: .75rem; right: .75rem; top: calc(100% + .5rem); z-index: 2;
        max-width: none; margin: 0; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    }
    .alfogon .af-top.is-searching .af-qsearch { display: flex; }
    .alfogon .af-top .af-qsearch__section { max-width: 7.5rem; font-size: .9rem; padding-left: .6rem; }
    .alfogon .af-top .af-user__label, .alfogon .af-top .af-user__name { display: none; }
    .alfogon .af-top .af-user__button { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
    .alfogon .af-top .af-user__button::after { display: none; }
    .alfogon .af-top .af-user__button--in { padding: 0; }
    .alfogon .af-top .af-user__panel { right: -.25rem; }
}

/* Colour of each section (recipes orange, wines wine red, restaurants green, articles blue) for the Cassiopeia
   elements of its pages: line on top of the blog cards, links, titles of the cards */
.alfogon.com_jcookbook { --cassiopeia-color-primary: #F15025; }
.alfogon.com_jvino     { --cassiopeia-color-primary: #9c2150; }
.alfogon.com_jpages    { --cassiopeia-color-primary: #4f8a2b; }
.alfogon.com_content .blog-item .item-title a, .alfogon.com_content .blog-item h2 a,
.alfogon.com_tags .item-title a { color: #2d5988; }
.alfogon.com_content .blog-item .item-title a:hover, .alfogon.com_content .blog-item h2 a:hover { color: #1d3d60; }

/* Anuncios (com_postit): teal */
.alfogon { --af-c-ads: #0f7b83; --af-c-ads-soft: #e8f4f4; }
.af-box--ads { --c: var(--af-c-ads); --soft: var(--af-c-ads-soft); }
.alfogon.com_postit { --cassiopeia-color-primary: #0f7b83; }

/* Account panel of the header = modules of the "login" position (User menu, Login form) */
.alfogon .af-user__panel .af-navmod + .af-navmod { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #ece9e4; }
.alfogon .af-user__panel .af-nav__label { margin: 0 .5rem .3rem; }
.alfogon .af-user__panel .mod-menu { display: block; list-style: none; margin: 0; padding: 0; }
.alfogon .af-user__panel .mod-menu li { margin: 0; }
.alfogon .af-user__panel .mod-menu a { display: block; padding: .45rem .5rem; border-radius: 8px; color: #3d3c39; text-decoration: none; }
.alfogon .af-user__panel .mod-menu a:hover, .alfogon .af-user__panel .mod-menu .current > a { background: #f5f5f3; color: #2d5988; }
.alfogon .af-user__panel .mod-menu ul { list-style: none; padding-left: .75rem; }
.alfogon .af-login-form__text { margin: 0 0 .5rem; font-size: .9rem; color: #5d5a54; }
.alfogon .af-user__panel .mod-login-logout .af-user__logout { width: 100%; }

/* Tablets: the photo carousel takes the whole width, in a wider format so that it fits on the screen */
@media (min-width: 576px) and (max-width: 991.98px) {
    .af-photos__stage { width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; }
}

/* Club (com_club): yellow */
.alfogon { --af-c-club: #b58300; --af-c-club-soft: #fff6d6; }
.af-box--club { --c: var(--af-c-club); --soft: var(--af-c-club-soft); }
.alfogon.com_club { --cassiopeia-color-primary: #b58300; }
.alfogon.com_club .btn-primary, .alfogon .com-club .btn-primary {
    --btn-bg: #f2b705; --btn-border-color: #d99e00; --btn-hover-bg: #d99e00; --btn-hover-border-color: #b98700; --btn-active-bg: #b98700;
    --btn-color: #2b2100; --btn-hover-color: #2b2100; --btn-active-color: #2b2100; color: #2b2100;
}

/* ------------------------------------------------------------------ Open layout (2026-11): the modules are no longer boxed;
   a title with a short line of the colour of the section and some space give the rhythm of the page */
.af-box {
    background: none !important; border: 0 !important; border-radius: 0; box-shadow: none; padding: 0;
}
.alfogon .af-box__title {
    font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #2f2c27; margin: 0 0 .9rem;
}
.alfogon .af-box__title::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .45rem; border-radius: 2px; background: var(--c); }
.alfogon .af-box__title a:hover { color: var(--c); }
.af-newwines .af-box__more, .af-home__d .mod_latestwines .af-box__more { top: .1rem; right: 0; }
.af-home__main, .af-home__side, .af-home__stack { gap: 2.25rem; }
.alfogon .container-sidebar-right > .af-box + .af-box, .alfogon .container-sidebar-left > .af-box + .af-box { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid #ece9e3 !important; }
.alfogon .af-user__avatar--photo { overflow: hidden; background: #f0ede6; }
.alfogon .af-user__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Title of a module with its "see more" link just after it */
.alfogon .af-box__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 .9rem; }
.alfogon .af-box__head .af-box__title { margin: 0; }
.alfogon .af-box__more--head { position: static !important; margin: 0 !important; padding: .1rem .7rem; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    border-radius: 2rem; font-size: .82rem; font-weight: 700; color: var(--c) !important; text-decoration: none; white-space: nowrap; line-height: 1.5; }
.alfogon .af-box__more--head:hover, .alfogon .af-box__more--head:focus-visible { background: var(--c); border-color: var(--c); color: #fff !important; text-decoration: none; }
/* Several modules in a position of the home page: more space between them */
.af-home__d > .af-box + .af-box { margin-top: 3rem; }
.af-home__d > .af-box + .af-box { padding-top: 2.25rem; border-top: 1px solid #ece9e3 !important; }
/* Activity of the Community on the home page: two columns on wide screens */
.af-home__d .cl-mod-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem 2rem; }

/* ------------------------------------------------------------------ Blog of the home page (Articles module, layout "blog") */
.af-blog { display: grid; gap: 1.6rem; }
.af-blog__lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
/* the picture of the first article takes the height of its text (never taller), cut to fill */
.af-blog__lead .af-blog__img { position: relative; aspect-ratio: auto; height: 100%; min-height: 11rem; }
.af-blog__lead .af-blog__img img { position: absolute; inset: 0; }
.af-blog__lead .af-blog__body { align-self: center; padding: .4rem 0; }
.af-blog__lead--noimg { grid-template-columns: minmax(0, 1fr); }
.af-blog__img { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft, #f5f3ef); }
.af-blog__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.af-blog__img:hover img { transform: scale(1.04); }
.af-blog__meta { margin: 0 0 .3rem; font-size: .8rem; color: #8a857b; letter-spacing: .02em; }
.af-blog__cat { color: var(--c, #e8590c); font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; }
.alfogon .af-blog__title { font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem; line-height: 1.3; font-weight: 700; margin: 0 0 .35rem; }
.alfogon .af-blog__lead .af-blog__title { font-size: 1.45rem; margin-bottom: .55rem; }
.alfogon .af-blog__title a { color: #2f2c27; text-decoration: none; }
.alfogon .af-blog__title a:hover { color: var(--c, #e8590c); }
.af-blog__text { margin: 0; color: #55524b; font-size: .92rem; line-height: 1.55; }
.af-blog__lead .af-blog__text { font-size: 1rem; }
.alfogon .af-blog__read { display: inline-block; margin-top: .7rem; font-weight: 700; font-size: .9rem; color: var(--c, #e8590c); text-decoration: none; }
.af-blog__grid { display: grid; grid-template-columns: repeat(var(--af-blog-cols, 3), minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
.af-blog__grid--1 { --af-blog-cols: 1; } .af-blog__grid--2 { --af-blog-cols: 2; } .af-blog__grid--3 { --af-blog-cols: 3; } .af-blog__grid--4 { --af-blog-cols: 4; }
.af-blog__card .af-blog__img { margin-bottom: .7rem; }
.af-blog__card--noimg { padding-top: .2rem; }
.af-blog__grid--1 .af-blog__card:not(.af-blog__card--noimg) { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1rem; }
.af-blog__grid--1 .af-blog__card .af-blog__img { grid-row: span 3; margin: 0; }
@media (max-width: 991.98px) { .af-blog__grid--3, .af-blog__grid--4 { --af-blog-cols: 2; } }
@media (max-width: 640px) {
    .af-blog__lead { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    .af-blog__lead .af-blog__img { height: auto; aspect-ratio: 16 / 10; }
    .af-blog__grid { --af-blog-cols: 1 !important; }
    .af-blog__grid--1 .af-blog__card:not(.af-blog__card--noimg) { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------------------------------------
   Main menu on computers (from 1200 px): horizontal bar under the header, sub-menus drop down on hover, on
   keyboard focus or with the chevron (touch screens). Below 1200 px it stays the side panel above.
   ------------------------------------------------------------------------------------------------------------ */
@media (min-width: 1200px) {
    .alfogon .af-nav.offcanvas-xl {
        position: sticky; top: var(--af-top-h, 69px); z-index: 1029;
        background: #fff !important; border-bottom: 1px solid #ece9e4; box-shadow: none;
    }
    .alfogon .af-nav .af-nav__body { display: block; padding: 0; overflow: visible; }
    .alfogon .af-nav .af-nav__body nav { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }
    .alfogon .af-nav .af-navlist { display: flex; flex-wrap: wrap; align-items: stretch; gap: .15rem; }
    .alfogon .af-nav .af-navlist__item--d1 { position: relative; border-bottom: 0; }
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__row { height: 100%; }
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__row > .af-navlist__link {
        min-height: 48px; padding: .55rem .8rem; font-size: 1rem; font-weight: 600; border-radius: 0;
        box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .15s ease, color .15s ease;
    }
    .alfogon .af-nav .af-navlist__item--d1:hover > .af-navlist__row > .af-navlist__link,
    .alfogon .af-nav .af-navlist__item--d1.is-open > .af-navlist__row > .af-navlist__link { background: transparent; color: #C23A10; box-shadow: inset 0 -3px 0 #F15025; }
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__row > .af-navlist__toggle { width: 26px; height: auto; margin-left: -.55rem; padding: 0; background: transparent; }
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__row > .af-navlist__toggle .af-navlist__chevron { width: 7px; height: 7px; border-width: 0 2px 2px 0; }
    /* drop-down panel */
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__sub {
        position: absolute; top: 100%; left: 0; z-index: 1031; display: none;
        min-width: 15rem; max-height: calc(100vh - var(--af-top-h, 69px) - 60px); overflow-y: auto;
        padding: .4rem; background: #fff; border: 1px solid #ece9e4; border-top: 0; border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 28px rgba(40, 30, 20, .14);
    }
    .alfogon .af-nav .af-navlist__item--d1:last-child > .af-navlist__sub,
    .alfogon .af-nav .af-navlist__item--d1:nth-last-child(2) > .af-navlist__sub { left: auto; right: 0; }
    .alfogon .af-nav .af-navlist__item--d1:hover > .af-navlist__sub,
    .alfogon .af-nav .af-navlist__item--d1:focus-within > .af-navlist__sub,
    .alfogon .af-nav .af-navlist__item--d1 > .af-navlist__sub.show { display: block; }
    .alfogon .af-nav .af-navlist__sub .af-navlist__link { min-height: 38px; padding: .4rem .75rem; border-radius: 6px; white-space: nowrap; }
    .alfogon .af-nav .af-navlist__sub .af-navlist__toggle { display: none; }
    .alfogon .af-nav .af-navlist__sub .af-navlist__sub { display: block; padding: 0 0 .25rem .75rem; }
}