/* Argafood: efectos */

/* 2. Transiciones entre paginas */
@view-transition { navigation: auto; }
.wp-site-blocks > header.wp-block-template-part { view-transition-name: af-cabecera; }
::view-transition-old(root) { animation: af-vt-sale .18s ease-in both; }
::view-transition-new(root) { animation: af-vt-entra .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes af-vt-sale { to { opacity: 0; } }
@keyframes af-vt-entra { from { opacity: 0; transform: translateY(10px); } }

/* 3. Cabecera compacta con cristal esmerilado */
.af-header { transition: padding .25s ease, background-color .25s ease; }
.af-header__logo img { transition: width .25s ease; }
.is-compacta .af-header {
    padding-top: .35rem !important; padding-bottom: .35rem !important;
    background-color: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
            backdrop-filter: saturate(1.6) blur(14px);
}
.is-compacta .af-header__logo img { width: 96px !important; }
@media (max-width: 781px) { .is-compacta .af-header__logo img { width: 84px !important; } }
.af-subnav { transition: top .25s ease; }

/* 6. Fotos ampliables */
.af-ficha .wp-block-image .lightbox-trigger, .af-galeria .lightbox-trigger { border-radius: 50%; }

/* 5. Buscador */
.af-buscar-btn {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    font: inherit; font-size: .95rem; color: var(--wp--preset--color--tinta-suave);
    background: var(--wp--preset--color--acero); border: 1px solid transparent; border-radius: 999px;
    padding: .5rem .9rem; white-space: nowrap;
}
.af-buscar-btn:hover { border-color: var(--wp--preset--color--linea); color: var(--wp--preset--color--tinta); }
.af-buscar-btn svg { width: 1.05em; height: 1.05em; }
.af-buscar-btn kbd { font: inherit; font-size: .75rem; opacity: .7; border: 1px solid var(--wp--preset--color--linea); border-radius: 4px; padding: 0 .3rem; }
@media all { .af-buscar-btn .af-buscar-btn__texto, .af-buscar-btn kbd { display: none; } .af-buscar-btn { padding: .6rem; } }

.af-buscador {
    width: min(640px, calc(100vw - 2rem)); max-height: min(70vh, 640px);
    margin: 12vh auto auto; padding: 0; border: 0; border-radius: 12px;
    box-shadow: 0 30px 80px rgba(18, 52, 37, .28); color: var(--wp--preset--color--tinta);
    overflow: hidden;
}
.af-buscador::backdrop { background: rgba(18, 52, 37, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.af-buscador[open] { display: flex; flex-direction: column; }
.af-buscador__campo { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--wp--preset--color--linea); }
.af-buscador__campo svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--wp--preset--color--verde); }
.af-buscador__campo input { flex: 1; border: 0; font: inherit; font-size: 1.15rem; padding: .25rem 0; background: none; color: inherit; }
.af-buscador__campo input:focus { outline: none; }
.af-buscador__cerrar { border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; color: var(--wp--preset--color--tinta-suave); padding: .5rem; }
.af-buscador__lista { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; }
.af-buscador__lista li { margin: 0; }
.af-buscador__lista a { display: block; padding: .7rem .85rem; border-radius: 8px; text-decoration: none; color: inherit; }
.af-buscador__lista a:hover, .af-buscador__lista a:focus, .af-buscador__lista a.is-activo { background: var(--wp--preset--color--verde-claro); outline: none; }
.af-buscador__lista strong { display: block; font-weight: 600; }
.af-buscador__lista span { font-size: .85rem; color: var(--wp--preset--color--tinta-suave); }
.af-buscador__lista mark { background: none; color: var(--wp--preset--color--verde); font-weight: 700; }
.af-buscador__vacio { padding: 1.25rem 1.35rem; color: var(--wp--preset--color--tinta-suave); margin: 0; }

.af-ficha.af-destacada { animation: af-destaca 2.4s ease-out; border-radius: 6px; }
@keyframes af-destaca { 0%, 40% { box-shadow: 0 0 0 4px var(--wp--preset--color--verde), 0 0 0 12px rgba(10, 138, 58, .15); } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (prefers-reduced-motion: no-preference) {

    /* 1. Titular que se expande y mosaico que se descubre */
    .af-hero__titulo { animation: af-ensancha 1.15s cubic-bezier(.2, .75, .1, 1) both; }
    @keyframes af-ensancha {
        from { font-stretch: 72%; letter-spacing: -0.035em; opacity: 0; }
        25% { opacity: 1; }
        to { font-stretch: 125%; letter-spacing: -0.02em; opacity: 1; }
    }
    .af-hero__mosaico figure { animation: af-cortina .95s cubic-bezier(.65, 0, .2, 1) both; }
    .af-hero__mosaico figure:nth-child(1) { animation-delay: .2s; }
    .af-hero__mosaico figure:nth-child(2) { animation-delay: .38s; }
    .af-hero__mosaico figure:nth-child(3) { animation-delay: .52s; }
    @keyframes af-cortina { from { clip-path: inset(100% 0 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
    .af-hero__texto, .af-hero .wp-block-buttons, .af-hero .af-datos { animation: af-aparece .7s ease-out .55s both; }
    @keyframes af-aparece { from { opacity: 0; transform: translateY(12px); } }

    /* 4. Imagenes que aparecen al hacer scroll (sin JavaScript) */
    @supports (animation-timeline: view()) {
        .af-ficha .wp-block-image img,
        .af-linea__img img,
        .af-galeria img,
        .af-seccion .wp-block-column > .wp-block-image img {
            animation: af-revela linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
        @keyframes af-revela { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
        .af-linea__img, .af-seccion .wp-block-column > .wp-block-image { overflow: hidden; }
    }
}

/* Fotos con esquinas mas redondeadas */
:root { --af-radio-foto: 12px; }
.af-hero__mosaico img,
.af-ficha .wp-block-image,
.af-ficha .wp-block-image img,
.af-linea__img img,
.af-linea__img,
.af-galeria img,
.af-galeria .wp-block-image,
.af-seccion .wp-block-image img,
.af-seccion .wp-block-column > .wp-block-image,
.af-mapa { border-radius: var(--af-radio-foto) !important; }
.af-galeria .wp-block-image, .af-ficha .wp-block-image, .af-linea__img { overflow: hidden; }
.af-ficha .wp-block-image img, .af-galeria img, .af-seccion .wp-block-column > .wp-block-image img { cursor: zoom-in; }
.pswp { --pswp-bg: #0d241a; }