/**
 * Casos de estudio — assets/css/casos.css
 *
 * Ficha de un caso: el hero y "Otros proyectos" de single-proyecto.php y las
 * secciones en bloques de modelo-casos.md §5. Se carga en la ficha y en el
 * editor (add_editor_style), así que se acota con clases del dump y nunca con
 * .div-block-83 ni .body-7, que en el editor no existen.
 *
 * - El color de cada caso llega como la variable --accent (style="" de
 *   .div-block-83 en la plantilla; en el editor, en .editor-styles-wrapper) y
 *   sustituye a los style="color:…" del dump.
 * - Las piezas decorativas vacías del dump (.div-block-79, .div-block-85,
 *   .div-block-87 y la imagen .image-11) son pseudo-elementos de su
 *   contenedor, porque un core/group vacío muestra en el editor el selector de
 *   variaciones (riesgo R3). Sus medidas copian las reglas de webflow.css.
 * - Los bloques cambian algunas etiquetas del dump (div → p, h1 → h2/h3) y
 *   envuelven las imágenes en <figure>: aquí se compensa lo que eso cambia.
 */

/* Color del caso ------------------------------------------------------------ */

.hero_proyecto .text-block-62,
.link-block-15 .icon-8,
.breadcrumb .icon-5,
.section-8 .text-block-64,
.section-9 .text-block-64,
.section-11 .text-block-64,
.heading-45.text_red,
.section-12 .text-block-66,
.section-12 .text-block-67,
.hero_proyecto--img .w-slider .icon {
    color: var(--accent, #ff5461);
}

.hero_proyecto .link-block-15 {
    background-color: var(--accent, #ff5461);
}

/* Slider del hero (assets/js/slider.js) ----------------------------------------
 * Las flechas y los puntos son <button> creados por el JS con las clases del
 * dump (en el dump eran <div role="button">): se quita el aspecto de botón del
 * navegador sin tocar lo que ponen webflow.css (.frost, .w-slider-dot…). El icono
 * de las flechas lleva el color del caso, como el style="color:…" del dump.
 */
:where(.w-slider) :where(button.w-slider-arrow-left, button.w-slider-arrow-right, button.w-slider-dot) {
    border: 0;
    padding: 0;
    font: inherit;
    background-color: transparent;
}

/* webflow.css redondea los puntos con .w-slider-nav.w-round > div. */
.w-slider-nav.w-round > .w-slider-dot {
    border-radius: 100%;
}

.w-slider .w-slider-arrow-left:focus-visible,
.w-slider .w-slider-arrow-right:focus-visible,
.w-slider .w-slider-dot:focus-visible {
    outline: 2px solid var(--accent, #ff5461);
    outline-offset: 2px;
}

/* Piezas decorativas -------------------------------------------------------- */

/* Línea junto a cada etiqueta (.div-block-79). */
.div-block-78::after,
.div-block-81::after,
.div-block-84::after {
    content: "";
    width: 64px;
    height: 1px;
    margin-left: 8px;
    margin-right: 8px;
    background-color: var(--accent, #ff5461);
}

/* Panel blanco detrás de las características (.div-block-85). */
.case_features::after {
    content: "";
    z-index: -1;
    background-color: var(--white);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    width: 200%;
    height: 100%;
    position: absolute;
    inset: 0% 0% auto auto;
    transform: translate(50%);
}

/* Fondo del testimonio (.div-block-87). */
.div-block-86::before {
    content: "";
    z-index: -1;
    opacity: .05;
    background-color: var(--accent, #ff5461);
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    width: 200%;
    height: 100%;
    position: absolute;
    inset: 0% auto auto 0%;
}

/* Onda decorativa de la sección 9 (.image-11, 1100 × 292). */
.section-9::before {
    content: "";
    opacity: .55;
    width: 50%;
    aspect-ratio: 1100 / 292;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url("../img/mask-group-2.png") center / 100% 100% no-repeat;
}

/* Etiquetas y encabezados --------------------------------------------------- */

/* El dump usa <div>; los bloques, <p>, que en webflow.css lleva margin-bottom. */
.div-block-78 > .text-block-64,
.div-block-81 > .text-block-64,
.div-block-84 > .text-block-64,
.div-block-86 > .text-block-66,
.div-block-88 > p {
    margin-bottom: 0;
}

/* Un solo h1 por página: .heading-45 pasa a h2/h3 con la tipografía del h1 del
   dump (webflow.css: h1{color:#fff;font-size:29px;margin:20px 0 10px}). */
:where(.section-9) .heading-45 {
    font-size: 29px;
}

:where(.section-9) .heading-45.max {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Imágenes: core/image pone la clase del dump en el <figure> ---------------- */

.wp-block-image.image-8 {
    width: max-content;
    max-width: 100%;
}

/* La imagen es un bloque, para que el <figure> no tome la altura de la línea. */
.wp-block-image.image-8 img,
.wp-block-image.image-9 img {
    display: block;
}

.wp-block-image.image-8 img {
    width: auto;
    max-height: 200px;
}

.wp-block-image.image-9 img {
    width: 100%;
}

.wp-block-image.image-14 {
    margin-bottom: 0;
}

.wp-block-image.image-14 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: inherit;
}

/* Editor ---------------------------------------------------------------------- */