/**
 * Listados de casos de estudio — assets/css/proyectos.css
 *
 * Tarjetas de los patrones "Proyectos – slider" (.collection-item-8, home y
 * portafolio) y "Otros proyectos" (.collection-item-3, ficha de un caso), hechas
 * con Query Loop y bloques core (modelo-casos.md §5.5 y §5.6). Se carga donde
 * hay un Query Loop y en el editor, así que se acota con clases del dump.
 *
 * Solo compensa lo que añaden los bloques frente al marcado del dump:
 * - core/post-template envuelve cada tarjeta en un <li>.
 * - core/post-featured-image y core/cover pintan la imagen destacada con un
 *   <img> dentro del contenedor que en el dump tenía background-image.
 * - core/read-more lleva un texto accesible ("Ver caso: <título>") donde el dump
 *   tenía un enlace vacío o solo un icono. El texto no se muestra y el icono
 *   (.w-icon-slider-right de webflow-icons, U+E600) es un pseudo-elemento.
 */

/* El <li> no genera caja: la tarjeta es el elemento de la rejilla, como en el dump. */
.wp-block-post-template.collection-list-7 > li,
.wp-block-post-template.collection-list-4 > li {
    display: contents;
}

/* Tarjeta de home y portafolio ---------------------------------------------- */

/* Fondo (.div-block-182) y copia desenfocada (.image-21) de la imagen destacada. */
.wp-block-post-featured-image.div-block-182,
.wp-block-post-featured-image.image-21 {
    margin: 0;
}

.wp-block-post-featured-image.div-block-182 {
    overflow: hidden;
    background-image: none;
}

.wp-block-post-featured-image.div-block-182 img,
.wp-block-post-featured-image.image-21 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-image.image-27 {
    margin: 0;
}

/* Enlace que cubre la tarjeta (.link-block-17) y botón del slider (.link-block-14). */
.collection-item-8 .link-block-17,
.div-block-175 .link-block-14,
.collection-item-3 .link-block-3 {
    font-size: 0;
}

.div-block-175 .link-block-14::before,
.collection-item-3 .link-block-3::before {
    content: "\e600";
    content: "\e600" / "";
    width: 1em;
    height: 1em;
    margin: auto;
    font-family: webflow-icons;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* .icon-9 del dump */
.div-block-175 .link-block-14::before {
    font-size: 12px;
    font-weight: 900;
}

/* .icon del dump */
.collection-item-3 .link-block-3::before {
    color: #fff;
    font-size: 22px;
}

@media screen and (max-width: 479px) {
    .collection-item-3 .link-block-3::before {
        font-size: 19px;
    }
}

/* Otros proyectos (.section-13) --------------------------------------------- */

/* core/cover: sin la altura mínima ni el fondo de muestra de .div-block-91. */
.wp-block-cover.div-block-91 {
    min-height: 0;
    background-image: none;
}

/* El velo sobre la imagen es el .frost del dump (webflow.css: #ffffff91 a toda
   la tarjeta). Aquí lo hace el overlay del core/cover, sin color propio (el
   core lo pintaría negro); si el equipo le elige un color de la paleta, manda
   ese. Antes iba en línea (customOverlayColor; Fase 6, T-12). */
.wp-block-cover.div-block-91 > .wp-block-cover__background:not([class*="-background-color"]) {
    background-color: #ffffff91;
}

/* En el dump, .heading-46 es un h1 (webflow.css: h1{font-family:Avenir Next}). */
.div-block-91 .heading-46 {
    font-family: Avenir Next, sans-serif;
}

.div-block-91 .heading-46 a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

/* Todo el recuadro enlaza al caso, como el <a class="link-block-4"> del dump:
   el enlace del título se extiende hasta el borde (padding de .div-block-91). */
.div-block-91 .heading-46 a::after {
    content: "";
    position: absolute;
    inset: -16px -32px -16px -16px;
}

/* Editor ---------------------------------------------------------------------- */
/* Carrusel 3D del portafolio (patrón "Portafolio – carrusel 3D", C-02) --------
 * Marcado del Query Loop: .wheel-slider > .wp-block-query.swiper-container >
 * ul.wp-block-post-template.swiper-wrapper > li.wp-block-post (la slide).
 * assets/js/carrusel.js inicia Swiper (clase .swiper-initialized) y crea las
 * flechas. Sin JS (y en el editor) las slides se ven planas, en fila.
 */

/* En webflow.css, .hero tiene display:none: en el dump el carrusel no se veía.
   Se muestra por decisión del plan (PLAN.md, Fase 3B, punto 2). */
.hero:has(.wheel-slider) {
    display: flex;
}

/* Estilos de la contenedora y de la lista del dump (<style> en línea de
   dump/portafolio). */
.wheel-slider .swiper-wrapper {
    transform-style: preserve-3d;
    transition-property: transform;
    box-sizing: content-box;
}

/* La slide: el <li> de WordPress con los estilos de .swiper-slide de webflow.css
   (el <li> no puede llevar esa clase), sin el margen ni la viñeta que
   webflow.css da a todo <li> (en el dump era un <div>). */
.wheel-slider .wp-block-post {
    margin: 0;
    list-style: none;
    text-align: center;
    border-radius: 20px;
    flex: none;
    width: 30%;
    height: 50vh;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px #0003;
}

@media screen and (max-width: 991px) {
    .wheel-slider .wp-block-post {
        width: 45%;
        height: 60vh;
        min-height: 390px;
    }
}

@media screen and (max-width: 767px) {
    .wheel-slider .wp-block-post {
        width: 50%;
        height: 50vh;
        transition-duration: .5s;
    }
}

@media screen and (max-width: 479px) {
    .wheel-slider .wp-block-post {
        width: 70%;
        height: 60vh;
    }
}

/* Imagen destacada a toda la slide (.slide-image del dump era el <img>). */
.wp-block-post-featured-image.slide-image {
    margin: 0;
}

.wp-block-post-featured-image.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La marca es un <p> (en el dump, un <div>). */
.slide-text-wrap p.slide-category {
    margin-top: 0;
}

/* Enlace que cubre la slide (a.slide-content del dump): su texto ("Ver caso:
   <título>") es solo para lectores de pantalla. */
.wheel-slider .slide-content {
    font-size: 0;
}

/* La "rueda" del dump. En el dump era un transform prioritario que pisaba el
   de Swiper; aquí son las propiedades rotate y translate, que se componen con
   el transform en línea del coverflow. rotate(θ) translateY(d) del dump es lo
   mismo que translate: (-d·sen θ, d·cos θ) seguido de rotate: θ. */
.wheel-slider .swiper-initialized .wp-block-post {
    rotate: -20deg;
    translate: 136.81px 375.88px;
}

.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-next + .wp-block-post {
    rotate: 20deg;
    translate: -136.81px 375.88px;
}

.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-prev {
    rotate: -10deg;
    translate: 17.36px 98.48px;
}

.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-next {
    rotate: 10deg;
    translate: -17.36px 98.48px;
}

.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-active {
    rotate: none;
    translate: none;
}

/* El texto aparece solo en la slide activa, con los retrasos del dump. */
.wheel-slider .swiper-initialized .wp-block-post .slide-heading,
.wheel-slider .swiper-initialized .wp-block-post .slide-category {
    transform: translateY(140%);
    opacity: 0;
}

.wheel-slider .swiper-initialized .wp-block-post .slide-category {
    transition-delay: .3s;
}

.wheel-slider .swiper-initialized .wp-block-post .slide-heading {
    transition-delay: .8s;
}

.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-active .slide-heading,
.wheel-slider .swiper-initialized .wp-block-post.swiper-slide-active .slide-category {
    transform: translateY(0%);
    opacity: 1;
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    pointer-events: none;
}

/* Flechas (<button>, las crea carrusel.js). */
.wheel-slider .swiper-nav-btn {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.wheel-slider .swiper-nav-btn:focus-visible {
    outline: 2px solid #d7ff00;
    outline-offset: 2px;
}

/* Aviso para lectores de pantalla del cambio de slide (sin estilos de Swiper). */
.wheel-slider .swiper-notification {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .wheel-slider .wp-block-post,
    .wheel-slider .wp-block-post .slide-heading,
    .wheel-slider .wp-block-post .slide-category {
        transition: none;
    }
}